echelon/i2p.i2p
1
0
Fork 0
forked from I2P_Developers/i2p.i2p
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I2PSnark:

Browse Source 
- Disable JavaScript td:onclick (handled by css)
- Fix minimode bug in vanilla/ubergine
- Minimode for dark/classic
- ubergine:
  - Further optimizations to reduce lag/cpu load
  - New hidpi details.png to bypass mix-blend mode in .snarkTorrents
- Usability:
  - Tab navigation now works for toggle panels
  - Touch target for configure button now extends entire length
- All themes: cleanups and optimizations
This commit is contained in:
str4d
2017-06-19 13:00:50 +00:00
parent 36030ae180
commit 3d535a2282
9 changed files with 1051 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
View File

@ -1694,13 +1694,14 @@ public class I2PSnarkServlet extends BasicServlet {
} }
// Torrent name column // Torrent name column
out.write("</td><td class=\"snarkTorrentName\""); out.write("</td><td class=\"snarkTorrentName\">");
if (isMultiFile) { // No need for javascript here.. css now handles this
//if (isMultiFile) {
// link on the whole td // link on the whole td
out.write(" onclick=\"document.location='" + encodedBaseName + "/';\">"); // out.write(" onclick=\"document.location='" + encodedBaseName + "/';\">");
} else { //} else {
out.write('>'); // out.write('>');
} //}
if (remaining == 0 || isMultiFile) { if (remaining == 0 || isMultiFile) {
StringBuilder buf = new StringBuilder(128); StringBuilder buf = new StringBuilder(128);
buf.append("<a href=\"").append(encodedBaseName); buf.append("<a href=\"").append(encodedBaseName);
@ -2554,6 +2555,8 @@ public class I2PSnarkServlet extends BasicServlet {
boolean isPrivate = privateTrackers.contains(t.announceURL); boolean isPrivate = privateTrackers.contains(t.announceURL);
boolean isKnownOpen = _manager.util().isKnownOpenTracker(t.announceURL); boolean isKnownOpen = _manager.util().isKnownOpenTracker(t.announceURL);
boolean isOpen = isKnownOpen || openTrackers.contains(t.announceURL); boolean isOpen = isKnownOpen || openTrackers.contains(t.announceURL);
// TODO: either disable all checkboxes in this section, or disable all checkboxes that cannot be configured, leaving only user-configured tracker checkboxes active
// Currently checked but fixed checkboxes are not marked as disabled, preventing styling by disabled status
buf.append("<tr class=\"knownTracker\"><td><input type=\"checkbox\" class=\"optbox\" id=\"").append(name).append("\" name=\"delete_") buf.append("<tr class=\"knownTracker\"><td><input type=\"checkbox\" class=\"optbox\" id=\"").append(name).append("\" name=\"delete_")
.append(name).append("\" title=\"").append(_t("Mark tracker for deletion")).append("\">" + .append(name).append("\" title=\"").append(_t("Mark tracker for deletion")).append("\">" +
"</td><td><label for=\"").append(name).append("\">").append(name) "</td><td><label for=\"").append(name).append("\">").append(name)

11
history.txt
View File

@ -2,6 +2,17 @@
* Console: cleanup & formatting tidyups for welcome page readmes, remove * Console: cleanup & formatting tidyups for welcome page readmes, remove
unneeded classes unneeded classes
* i2ptunnel: consistent tooltips and Destinations for editClient and editServer * i2ptunnel: consistent tooltips and Destinations for editClient and editServer
* I2PSnark:
- Disable JavaScript td:onclick (handled by css)
- Fix minimode bug in vanilla/ubergine
- Minimode for dark/classic
- ubergine:
- Further optimizations to reduce lag/cpu load
- New hidpi details.png to bypass mix-blend mode in .snarkTorrents
- Usability:
- Tab navigation now works for toggle panels
- Touch target for configure button now extends entire length
- All themes: cleanups and optimizations
2017-06-15 zzz 2017-06-15 zzz
* Data: Cache hostname lookups in RouterAddress (ticket #1998) * Data: Cache hostname lookups in RouterAddress (ticket #1998)

363
installer/resources/themes/snark/classic/snark.css
View File

@ -47,14 +47,11 @@ body.iframed {
} }
.page { .page {
font-size: 9pt !important;
line-height: 160% !important; line-height: 160% !important;
min-width: 900px !important; min-width: 900px !important;
margin: 5px 0 0 0; margin: 5px 0 0 0;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
opacity: 1;
color: #0c153d;
border: 1px solid #89f; border: 1px solid #89f;
background: #eef; background: #eef;
box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset; box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset;
@ -304,8 +301,8 @@ body.iframed {
text-align: center; text-align: center;
} }
.snarkTorrents th:nth-child(2) { .snarkTorrents thead th:nth-child(2) {
text-align: left; text-align: center !important;
} }
.snarkTorrents th br { .snarkTorrents th br {
@ -347,7 +344,6 @@ body.iframed {
width: 24px !important; width: 24px !important;
} }
.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp { .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
width: 5%; width: 5%;
min-width: 40px; min-width: 40px;
@ -358,31 +354,16 @@ body.iframed {
width: 0 !important; width: 0 !important;
} }
pre {
font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
font-weight: bold !important;
width: 100%;
height: 8px;
padding: 0;
text-align: left !important;
color: #35f;
}
table { table {
width: 100%; width: 100%;
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 0; padding: 0;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
opacity: 1 !important;
color: #323; color: #323;
border: 0; border: 0;
} }
tr {
opacity: 1;
}
thead, tfoot { thead, tfoot {
background: #fff; background: #fff;
} }
@ -395,10 +376,6 @@ tfoot tr:first-child th {
vertical-align: middle !important; vertical-align: middle !important;
} }
tfoot tr:nth-child(n+1) {
text-align: left;
}
th { th {
font-size: 9pt; font-size: 9pt;
padding: 3px 2px; padding: 3px 2px;
@ -431,21 +408,6 @@ tfoot th {
padding-bottom: 4px !important; 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 {
margin: 0 2px 3px 0 !important;
padding-right: 0 !important;
}
/*
tfoot tr:nth-child(n+1) {
text-align: left;
}
*/
.snarkTorrents tfoot tr:first-child { .snarkTorrents tfoot tr:first-child {
line-height: 130%; line-height: 130%;
} }
@ -490,7 +452,6 @@ tfoot tr:nth-child(n+1) {
.snarkTorrents th br { .snarkTorrents th br {
display: none; display: none;
/* kill double height button display */
} }
.snarkTorrents th:nth-child(4), .snarkTorrents th:nth-child(4),
@ -543,11 +504,11 @@ tfoot tr:nth-child(n+1) {
text-align: left; text-align: left;
} }
.snarkTorrents td:nth-child(1) { .snarkGraphicStatus {
width: 24px !important; width: 1% !important;
} }
.snarkTorrents td:nth-child(3) { td.snarkTrackerDetails {
text-align: right !important; text-align: right !important;
} }
@ -811,14 +772,9 @@ th.headerdownloaded {
td { td {
font-size: 9pt; font-size: 9pt;
padding: 2px; padding: 2px;
opacity: 1;
color: #333 !important; color: #333 !important;
} }
.mainsection td {
color: #111;
}
td:first-child { td:first-child {
font-size: 9pt; font-size: 9pt;
text-align: right; text-align: right;
@ -847,12 +803,7 @@ td:first-child {
text-align: center !important; text-align: center !important;
} }
.snarkTorrentAction img {
opacity: 1;
}
.snarkTorrentAction img:hover { .snarkTorrentAction img:hover {
opacity: 1;
box-shadow: 0 0 1px 1px #f90; box-shadow: 0 0 1px 1px #f90;
} }
@ -890,10 +841,6 @@ td:first-child {
background: #fff; background: #fff;
} }
.snarkTorrentstatus {
min-width: 0;
}
.snarkTorrentStatus { .snarkTorrentStatus {
text-align: left !important; text-align: left !important;
white-space: nowrap; white-space: nowrap;
@ -1100,9 +1047,6 @@ tr:hover .percentBarText {
transition: ease opacity 0.2s; transition: ease opacity 0.2s;
} }
.priorityIndicator {
}
/* end download bars */ /* end download bars */
.choked, .choked a:hover { .choked, .choked a:hover {
@ -1121,7 +1065,7 @@ tr:hover .percentBarText {
max-width: 96px; max-width: 96px;
max-height: 64px; max-height: 64px;
transition: ease all 0.3s; transition: ease all 0.3s;
margin: 0 0 0 -4px !important; margin: -6px 0 -6px -4px !important;
filter: none !important; filter: none !important;
} }
@ -1139,8 +1083,13 @@ tr:hover .percentBarText {
padding-left: 30px; padding-left: 30px;
} }
.snarkConfigTitle:hover, label.toggleview:hover { .snarkConfigTitle:hover, label.toggleview:hover, input.toggle_input:focus + .toggleview {
background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important; background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
color: #f60 !important;
}
input.toggle_input:focus + .toggleview img {
filter: drop-shadow(0 0 1px #f60);
} }
.snarkConfigTitle:active, label.toggleview:active { .snarkConfigTitle:active, label.toggleview:active {
@ -1152,10 +1101,10 @@ tr:hover .percentBarText {
font-weight: bold; font-weight: bold;
font-variant: small-caps !important; font-variant: small-caps !important;
display: inline-block; display: inline-block;
min-width: 200px; min-width: 260px;
margin: 0 0 -4px !important; margin: 0 0 -4px !important;
vertical-align: middle; vertical-align: middle;
padding: 4px 25px; padding: 4px 1px;
letter-spacing: .08em; letter-spacing: .08em;
border: 1px solid #89f; border: 1px solid #89f;
border-top: none; border-top: none;
@ -1180,8 +1129,8 @@ _:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkCo
font-size: 11pt !important; font-size: 11pt !important;
} }
.configsectionpanel .snarkConfigTitle { .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
color: #444; color: #444 !important;
} }
.snarkConfigTitle img, label.toggleview img { .snarkConfigTitle img, label.toggleview img {
@ -1230,9 +1179,8 @@ hr {
height: 1px; height: 1px;
margin: 5px 0 7px 0; margin: 5px 0 7px 0;
text-align: center; text-align: center;
color: #444; color: transparent;
border: 0 solid #444; background: transparent;
background: #444;
} }
a:link { a:link {
@ -1613,9 +1561,8 @@ img:hover {
} }
#pagenav a:active img { #pagenav a:active img {
background: linear-gradient(to bottom, #99f 0%, #99f 50%, #66f 51%);
background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%); background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%);
box-shadow: inset 2px 2px 3px 1px #333; box-shadow: inset 2px 2px 2px 1px #99f;
} }
#pagenav img.disable, #pagenav img.disable:hover { #pagenav img.disable, #pagenav img.disable:hover {
@ -1628,20 +1575,20 @@ img:hover {
font-weight: bold !important; font-weight: bold !important;
} }
div.newtorrentsection td:first-child, .newtorrentsection td:first-child,
div.addtorrentsection td:first-child { .addtorrentsection td:first-child {
font-weight: bold; font-weight: bold;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
white-space: nowrap; white-space: nowrap;
} }
div.newtorrentsection td:first-child, .newtorrentsection td:first-child,
div.addtorrentsection td:first-child { .addtorrentsection td:first-child {
width: 120px; width: 120px;
} }
table#trackerselect { #trackerselect {
width: 100% !important; width: 100% !important;
width: calc(100% - 150px) !important; width: calc(100% - 150px) !important;
margin: 2px 5px 0 5px; margin: 2px 5px 0 5px;
@ -1693,7 +1640,7 @@ table#trackerselect {
margin: 3px !important; margin: 3px !important;
} }
div.configsectionpanel td:first-child { .configsectionpanel td:first-child {
font-weight: bold; font-weight: bold;
padding-right: 10px !important; padding-right: 10px !important;
padding-left: 5px !important; padding-left: 5px !important;
@ -1918,16 +1865,16 @@ div.configsectionpanel td:first-child {
color: #0c153d !important; color: #0c153d !important;
} }
div.configsection table { .configsection table {
opacity: 1; opacity: 1;
color: #ffb; color: #ffb;
} }
div.configsection a { .configsection a {
font-weight: bold; font-weight: bold;
} }
div.configsection a:hover { .configsection a:hover {
text-decoration: none; text-decoration: none;
color: #f60; color: #f60;
} }
@ -1966,7 +1913,9 @@ input.trackerannounce {
/* toggle create/add panel view */ /* toggle create/add panel view */
input.toggle_input { /* hide checkbox and use label as faux panel heading */ input.toggle_input { /* hide checkbox and use label as faux panel heading */
display: none; position: absolute;
opacity: 0;
z-index: -1;
} }
label.toggleview:hover { label.toggleview:hover {
@ -2045,6 +1994,7 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
background-blend-mode: luminosity; background-blend-mode: luminosity;
} }
/*
.debugConnection { .debugConnection {
color: #030; color: #030;
font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
@ -2073,14 +2023,6 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
font-weight: bold; font-weight: bold;
} }
.debuginfo td {
line-height: 120% !important;
}
.debuginfo b {
text-transform: capitalize;
}
.from, .to { .from, .to {
font-family: sans-serif; font-family: sans-serif;
font-size: 12pt; font-size: 12pt;
@ -2089,6 +2031,15 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
line-height: 50%; line-height: 50%;
text-shadow: 0 0 1px #fff; text-shadow: 0 0 1px #fff;
} }
*/
.debuginfo td {
line-height: 120% !important;
}
.debuginfo b {
text-transform: capitalize;
}
/* debug panel */ /* debug panel */
@ -2156,6 +2107,8 @@ hr.debug {
width: 100%; width: 100%;
background: #89f; background: #89f;
background: linear-gradient(to right, #89f 40%, #eef); background: linear-gradient(to right, #89f 40%, #eef);
color: #efefff;
border: none;
} }
hr.debug + hr { hr.debug + hr {
@ -2169,7 +2122,7 @@ hr.debug:nth-child(n+7) {
hr.debug:last-child { hr.debug:last-child {
height: 0; height: 0;
margin-bottom: -5px; margin-bottom: -5px;
margin-top: -15px; margin-top: -10px;
} }
/* end debug */ /* end debug */
@ -2420,10 +2373,6 @@ td#bwHelp a {
padding-right: 2px; padding-right: 2px;
} }
.snarkCommentInfo td:last-child, .snarkComments td:last-child {
/* width: 1% !important;*/
}
.snarkComments td { .snarkComments td {
white-space: nowrap; white-space: nowrap;
} }
@ -2433,6 +2382,10 @@ td#bwHelp a {
padding-left: 20px; padding-left: 20px;
} }
.commentAuthorName:empty {
display: none;
}
.commentWrapper { .commentWrapper {
border: 1px solid #bbf; border: 1px solid #bbf;
margin: 2px 0; margin: 2px 0;
@ -2625,7 +2578,7 @@ body {
} }
#dhtDebugInner { #dhtDebugInner {
margin-top: -24px !important; margin-top: -25px !important;
} }
} }
@ -2672,6 +2625,10 @@ body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_
.percentDownloaded { .percentDownloaded {
pointer-events: none; /* hide tooltip */ pointer-events: none; /* hide tooltip */
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
min-width: 300px;
}
} }
@media screen and (min-width: 1400px) { @media screen and (min-width: 1400px) {
@ -2692,10 +2649,6 @@ td.snarkTorrentDownloaded {
white-space: nowrap; white-space: nowrap;
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
min-width: 240px;
}
.snarkTorrentStatus b { .snarkTorrentStatus b {
margin-right: 3px; margin-right: 3px;
} }
@ -2703,6 +2656,216 @@ td.snarkTorrentDownloaded {
#configs td:first-child { #configs td:first-child {
min-width: 220px !important; min-width: 220px !important;
} }
#dhtDebugInner {
margin-top: -26px !important;
} }
}
/* mini-mode */
@media screen and (max-width: 800px) {
.page {
min-width: 680px !important;
}
.snarknavbar {
min-width: 688px !important;
}
th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, img[src$="torrent.png"] {
display: none !important;
}
.snarkGraphicStatus {
max-width: 12px !important;
padding-left: 3px !important;
}
.snarkGraphicStatus img {
max-width: 18px;
}
.snarkTorrentName a:not(old) {
max-width: 360px !important;
}
.snarkTorrents th img {
max-height: 18px;
}
.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow {
display: none;
}
.percentBarText {
font-size: 8pt !important;
}
.snarkTorrentDetails {
padding-left: 8px;
}
.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails {
font-size: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
width: 0 !important;
padding: 0;
overflow: hidden;
color: transparent !important;
}
.snarkTorrentDetails {
padding-left: 10px !important;
padding-right: 5px !important;
}
#totals {
margin-left: 2px !important;
}
.addtorrentsection td:first-child, .newtorrentsection td:first-child {
width: 20%;
}
.toggleview, .snarkConfigTitle {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.snarkConfigTitle {
margin-bottom: -3px !important;
}
.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
font-size: 10pt !important;
}
.toggleview img, .snarkConfigTitle img {
height: 12px;
margin-right: 0 !important;
}
#configs td:first-child, .configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
min-width: 150px !important;
max-width: 50%;
}
.trackerconfig a, .trackerconfig input[type="text"] {
max-width: 150px !important;
}
.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) {
display: none;
}
#trackerselect td a {
max-width: 200px !important;
}
.snarkTorrentInfo {
border-bottom: none !important;
margin-bottom: -5px !important;
position: relative;
z-index: 10;
}
.snarkTorrentInfo th {
padding-top: 4px;
padding-bottom: 4px;
}
.snarkTorrentInfo th:nth-child(2) {
padding-left: 5px;
border-bottom: 1px solid #89f !important;
}
.snarkDirInfo td.snarkFileStatus {
font-size: 0 !important;
text-align: center !important;
}
.snarkDirInfo td.snarkFileStatus .percentbarText {
font-size: 7pt !important;
}
.snarkDirInfo .snarkFileStatus img {
float: none;
}
.snarkFileStatus img[src*="clock"] {
float: left;
}
th a img {
max-height: 16px !important;
}
.snarkTorrentAction input[type="image"] {
max-height: 8px !important;
padding: 3px !important;
}
#configs {
margin-top: 8px !important;
border-top: 1px solid #89f !important;
}
#configs td:last-child {
white-space: nowrap !important;
}
#configs #bwhelp, #configs #bwhelp a {
background: none !important;
font-size: 0 !important;
width: 0 !important;
overflow: hidden;
}
#configs tr:nth-child(n+16) {
display: none;
}
#configs tr:nth-last-child(2) {
display: table-row !important;
}
#configs tr {
border: none !important;
}
.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
width: 65% !important;
}
.snarkCommentInfo td:first-child, .snarkComments td:first-child {
width: 120px !important;
max-width: 120px !important;
min-width: 120px !important;
}
.snarkComments .commentDate {
width: 70px;
}
.snarkComments .commentDelete {
background: none !important;
padding-left: 0 !important;
}
#dhtDebugInner {
margin-top: -19px !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 800px) {
.snarkConfigTitle {
margin-top: 0 !important;
}
}
/* end mini-mode */
/* end responsive layout */ /* end responsive layout */

287
installer/resources/themes/snark/dark/snark.css
View File

@ -1,18 +1,22 @@
/* I2PSnark theme "Camo" aka Dark */ /* I2PSnark theme "Camo" aka Dark */
/* Author: dr|z3d */ /* Author: dr|z3d */
html {
height: 100%;
}
body { body {
margin: 9px 8px; margin: 9px 8px;
color: #ee9; color: #ee9;
font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
background: #000; background: url(/themes/console/dark/images/camotile2.png) top left;
background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left; background-size: 175px 175px;
background-size: 3px 3px, 175px 175px;
} }
/* preload top navigation mouseovers */ /* preload top navigation mouseovers */
body { body {
background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
url(/themes/console/dark/images/camotile2.png) top left, url(/themes/console/dark/images/camotile2.png) top left,
url(images/button_snark_hover.png) no-repeat, url(images/button_snark_hover.png) no-repeat,
url(images/button_snark_active.png) no-repeat, url(images/button_snark_active.png) no-repeat,
@ -20,7 +24,7 @@ body {
url(images/button_tracker_active.png) no-repeat, url(images/button_tracker_active.png) no-repeat,
url(images/button_forum_hover.png) no-repeat, url(images/button_forum_hover.png) no-repeat,
url(images/button_forum_active.png) no-repeat !important; url(images/button_forum_active.png) no-repeat !important;
background-size: 3px 3px, 175px 175px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; background-size: 100% 100%, 175px 175px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
} }
body.iframed { body.iframed {
@ -29,6 +33,7 @@ body.iframed {
} }
/* preload top navigation mouseovers */ /* preload top navigation mouseovers */
body.iframed { body.iframed {
background: url(/themes/console/images/transparent.gif), background: url(/themes/console/images/transparent.gif),
url(images/button_snark_hover.png) no-repeat, url(images/button_snark_hover.png) no-repeat,
@ -49,7 +54,7 @@ body.iframed {
text-align: center; text-align: center;
opacity: 1; opacity: 1;
background: #000; background: #000;
background: repeating-linear-gradient(135deg, #010 0px, #010 10px, #020 10px, #020 20px, #010 20px) !important; background: repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px);
box-shadow: inset 0 0 0 1px #000 !important; box-shadow: inset 0 0 0 1px #000 !important;
} }
@ -60,7 +65,7 @@ body.iframed {
margin: 5px 0; margin: 5px 0;
box-shadow: none; box-shadow: none;
background: url(/themes/console/dark/images/camotile2.png) repeat scroll left top #000; background: url(/themes/console/dark/images/camotile2.png) repeat scroll left top #000;
background: linear-gradient(to right, #000 0%, #020 50%, #000 100%); background: linear-gradient(to right, #000, #020 50%, #000) !important;
} }
.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] { .toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
@ -91,7 +96,7 @@ body.iframed {
margin: 0 0 -6px !important; margin: 0 0 -6px !important;
padding: 9px 0 8px; padding: 9px 0 8px;
background: #010 !important; background: #010 !important;
background-image: linear-gradient(to bottom, #001000 0%, #001900 51%, #000 51%, #000 100%) !important; background-image: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important;
min-width: 888px; min-width: 888px;
text-align: center; text-align: center;
border: 1px solid #494; border: 1px solid #494;
@ -361,15 +366,6 @@ tfoot th {
white-space: normal; white-space: normal;
} }
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;
}
tfoot tr:nth-child(n+1) {
text-align: left;
}
.headerstatus { .headerstatus {
text-align: center; text-align: center;
} }
@ -420,7 +416,7 @@ tfoot tr:nth-child(n+1) {
white-space: nowrap; white-space: nowrap;
} }
.snarkTorrents th:nth-child(4), .SnarkTorrents th:nth-child(5), .SnarkTorrents th:nth-child(6), .SnarkTorrents th:nth-child(7), .SnarkTorrents th:nth-child(8), .SnarkTorrents th:nth-child(9), .SnarkTorrents th:last-child { #pagenav, th.snarkTorrentETA, th.snarkTorrentDownloaded, th.snarkTorrentUploaded, th.snarkTorrentRateDown, th.snarkTorrentRateUp, th.SnarkTorrentAction {
text-align: center; text-align: center;
} }
@ -1079,10 +1075,10 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
line-height: 140%; line-height: 140%;
} }
.snarkConfigTitle, label.toggleview { .snarkConfigTitle, .toggleview {
font-size: 11pt; font-size: 11pt;
font-weight: bold; font-weight: bold;
padding: 3px 22px 3px 20px; padding: 3px 1px 3px 1px;
margin: 5px 0 10px 0 !important; margin: 5px 0 10px 0 !important;
letter-spacing: 0.2em; letter-spacing: 0.2em;
border: 1px solid #494; border: 1px solid #494;
@ -1094,12 +1090,12 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
filter: drop-shadow(0 2px 1px #000); filter: drop-shadow(0 2px 1px #000);
display: inline-block; display: inline-block;
margin: 0 0 -3px !important; margin: 0 0 -3px !important;
min-width: 220px; min-width: 260px;
box-shadow: inset 0 0 0 1px #000; box-shadow: inset 0 0 0 1px #000;
} }
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkConfigTitle, label.toggleview { .snarkConfigTitle, .toggleview {
font-size: 13pt !important; font-size: 13pt !important;
} }
} }
@ -1108,7 +1104,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
margin-bottom: -2px !important; margin-bottom: -2px !important;
} }
.snarkConfigTitle a, label.toggleview { .snarkConfigTitle a, .toggleview {
text-shadow: 0 0 1px #000 !important; text-shadow: 0 0 1px #000 !important;
} }
@ -1117,7 +1113,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
width: 100%; width: 100%;
} }
.snarkConfigTitle:hover, .toggleview:hover { .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
background: #000 !important; background: #000 !important;
background: linear-gradient(to bottom, #001000 50%, #000 50%) !important; background: linear-gradient(to bottom, #001000 50%, #000 50%) !important;
} }
@ -1136,15 +1132,15 @@ _:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
vertical-align: middle; vertical-align: middle;
} }
label.toggleview:active, .snarkConfigTitle a:active { .toggleview:active, .snarkConfigTitle a:active {
color: #f30 !important; color: #f30 !important;
} }
label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img { .toggleview img:hover, .toggleview:hover img, .snarkConfigTitle a:hover img {
filter: drop-shadow(0 0 1px #f60); filter: drop-shadow(0 0 1px #f60);
} }
label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img { .toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img {
transform: rotate(90deg); transform: rotate(90deg);
transition: ease transform 0.3s 0s; transition: ease transform 0.3s 0s;
} }
@ -1315,7 +1311,7 @@ thead a:active img {
transform: scale(0.9); transform: scale(0.9);
} }
.snarkTorrents thead th:last-child, .snarkTorrents td:last-child { .snarkTorrentAction {
white-space: nowrap; white-space: nowrap;
} }
@ -1323,7 +1319,7 @@ thead a:active img {
white-space: normal; white-space: normal;
} }
.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] { .snarkTorrentAction input[type="image"] {
border: 1px solid #000 !important; border: 1px solid #000 !important;
border: 1px solid #151 !important; border: 1px solid #151 !important;
margin: 0 2px !important; margin: 0 2px !important;
@ -1336,12 +1332,11 @@ thead a:active img {
filter: drop-shadow(0 0 1px #000); filter: drop-shadow(0 0 1px #000);
} }
.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:hover, .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
.snarkTorrents th:last-child input[type="image"]:focus, .snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */
border: 1px solid #f60 !important; border: 1px solid #f60 !important;
} }
.snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active { .snarkTorrentAction input[type="image"]:active {
box-shadow: inset 3px 3px 3px #000; box-shadow: inset 3px 3px 3px #000;
background-blend-mode: luminosity; background-blend-mode: luminosity;
transform: scale(0.9); transform: scale(0.9);
@ -1613,7 +1608,7 @@ img[src$="magnet.png"] {
width: 120px; width: 120px;
} }
table#trackerselect { #trackerselect {
border: 1px solid #131; border: 1px solid #131;
width: 100% !important; width: 100% !important;
width: calc(100% - 170px) !important; width: calc(100% - 170px) !important;
@ -1948,10 +1943,14 @@ input.trackerannounce {
/* toggle create/add panel view */ /* toggle create/add panel view */
input.toggle_input { /* hide checkbox and use label as faux panel heading */ input.toggle_input { /* hide checkbox and use label as faux panel heading */
display: none !important; position: absolute;
opacity: 0;
z-index: -1;
height: 0 !important;
width: 0 !important;
} }
label.toggleview:hover { .toggleview:hover, input.toggle_input:focus + .toggleview {
color: #f60; color: #f60;
cursor: pointer; cursor: pointer;
} }
@ -1987,7 +1986,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
display: none; display: none;
} }
label.toggleview, .snarkConfigTitle a:visited { .toggleview, .snarkConfigTitle a:visited {
color: #7c7; color: #7c7;
} }
@ -2026,6 +2025,7 @@ label.toggleview, .snarkConfigTitle a:visited {
margin-left: 1px; margin-left: 1px;
} }
/*
.debugConnection { .debugConnection {
font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace; font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
color: #ee0; color: #ee0;
@ -2057,6 +2057,7 @@ label.toggleview, .snarkConfigTitle a:visited {
font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
color: #cc7; color: #cc7;
} }
*/
.dhtdebug th { .dhtdebug th {
word-break: break-all; word-break: break-all;
@ -2228,16 +2229,19 @@ td#bwHelp {
margin-right: 3px; margin-right: 3px;
} }
.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus { .knownTracker input[type="radio"], .knownTracker input[type="radio"][disabled], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus {
opacity: 0.3; opacity: 0.3;
cursor: default; cursor: default;
filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
} }
.knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover { .knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover {
opacity: 0.5; opacity: 0.5;
} }
.knownTracker input[type="radio"][disabled], .knownTracker input[type="radio"][disabled]:hover {
opacity: 0.1 !important;
}
.snarkDirInfo tr:first-child th img:first-child { .snarkDirInfo tr:first-child th img:first-child {
margin-right: 5px; margin-right: 5px;
} }
@ -2357,7 +2361,7 @@ input[type="checkbox"]:checked::before {
content: "\2714"; content: "\2714";
border-radius: 1px; border-radius: 1px;
font-size: 14pt; font-size: 14pt;
color: #69EF68; color: #69ef68;
line-height: 80%; line-height: 80%;
font-family: sans-serif; font-family: sans-serif;
overflow: hidden; overflow: hidden;
@ -2406,6 +2410,12 @@ input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked,
.priority input[type="radio"] { .priority input[type="radio"] {
transform: scale(0.8); transform: scale(0.8);
} }
input.toggle_input, input.toggle_input:checked { /* hide checkbox and use label as faux panel heading */
position: absolute;
height: 0 !important;
width: 0 !important;
}
} }
/* end custom radios/checkboxes */ /* end custom radios/checkboxes */
@ -2667,7 +2677,7 @@ b.alwaysShow {
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { .snarkConfigtitle, .snarkConfigTitle a, .toggleview {
font-size: 11pt !important; font-size: 11pt !important;
} }
@ -2755,7 +2765,7 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty
padding-left: 25px !important; padding-left: 25px !important;
} }
.snarkConfigtitle, .snarkConfigTitle a, label.toggleview { .snarkConfigtitle, .snarkConfigTitle a, .toggleview {
font-size: 12pt !important; font-size: 12pt !important;
} }
@ -2794,16 +2804,16 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, code, textarea, input, input[ty
font-size: 10pt !important; font-size: 10pt !important;
} }
.snarkConfigTitle, .snarkConfigTitle a, label.toggleview { .snarkConfigTitle, .snarkConfigTitle a, .toggleview {
font-size: 12pt !important; font-size: 12pt !important;
} }
.snarkConfigTitle, label.toggleview { .snarkConfigTitle, .toggleview {
min-width: 240px !important; min-width: 300px !important;
padding-top: 4px; padding-top: 4px;
} }
label.toggleview { .toggleview {
padding-bottom: 5px; padding-bottom: 5px;
} }
@ -2825,8 +2835,8 @@ textarea[name="i2cpOpts"] {
height: 11px; height: 11px;
} }
.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) { .snarkTrackerDetails, .SnarkTorrentDetails {
width: 18px !important; width: 1% !important;
} }
.snarkTorrents .snarkTorrentName { .snarkTorrents .snarkTorrentName {
@ -2840,8 +2850,6 @@ textarea[name="i2cpOpts"] {
.page { .page {
padding: 10px; padding: 10px;
border: 1px solid #494; 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; box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
} }
@ -2881,5 +2889,186 @@ textarea[name="i2cpOpts"] {
} }
} }
/* mini-mode */
@media screen and (max-width: 800px) {
.page {
min-width: 650px !important;
}
.snarknavbar {
min-width: 648px !important;
}
th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img, img[src$="torrent.png"] {
display: none !important;
}
.snarkGraphicStatus {
max-width: 12px !important;
padding-left: 3px !important;
}
.snarkGraphicStatus img {
max-width: 18px;
}
.snarkTorrentName a:not(old) {
max-width: 360px !important;
}
.snarkTorrents th img {
max-height: 18px;
}
.snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo, .alwaysShow {
display: none !important;
}
.percentBarText {
font-size: 8pt !important;
}
.snarkTorrentDetails {
padding-left: 8px;
}
.snarkTorrents td.snarkTorrentStatus, .snarkTorrentETA, .snarkTrackerDetails {
font-size: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
width: 0 !important;
padding: 0;
overflow: hidden;
color: transparent !important;
}
.snarkTorrentDetails {
padding-left: 3px !important;
}
#totals {
margin-left: 2px !important;
}
.addtorrentsection td:first-child, .newtorrentsection td:first-child {
width: 20%;
}
.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
font-size: 10pt !important;
}
.toggleview img, .snarkConfigTitle img {
height: 12px;
margin-right: 0 !important;
}
#configs td:first-child, .configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
min-width: 150px !important;
}
.trackerconfig a, .trackerconfig input[type="text"] {
max-width: 150px !important;
}
.trackerconfig, form + form > .configsectionpanel, .addtorrentsection tr:last-child, .snarkTorrentInfo tr:nth-child(n+2) {
display: none;
}
#trackerselect td a {
max-width: 200px !important;
}
.snarkTorrentInfo {
border-bottom: none !important;
margin-bottom: -11px !important;
position: relative;
z-index: 10;
}
.snarkTorrentInfo th {
padding-top: 4px;
padding-bottom: 4px;
}
.snarkTorrentInfo th:nth-child(2) {
padding-left: 5px;
border-bottom: 1px solid #494 !important;
}
.snarkDirInfo td.snarkFileStatus {
font-size: 0 !important;
text-align: center !important;
}
.snarkDirInfo td.snarkFileStatus .percentbarText {
font-size: 7pt !important;
}
.snarkDirInfo .snarkFileStatus img {
float: none;
}
.snarkFileStatus img[src*="clock"] {
float: left;
}
th a img {
max-height: 16px !important;
}
.snarkTorrentAction input[type="image"] {
max-height: 8px !important;
padding: 3px !important;
}
#configs {
margin-top: 8px !important;
}
#configs #bwhelp {
background: none !important;
font-size: 0 !important;
}
#configs tr:nth-child(n+16) {
display: none;
}
#configs tr:nth-last-child(2) {
display: table-row !important;
}
#configs tr {
border: none !important;
}
.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
width: 65% !important;
}
.snarkCommentInfo td:first-child, .snarkComments td:first-child {
width: 120px !important;
max-width: 120px !important;
min-width: 120px !important;
}
.snarkComments .commentDate {
width: 70px;
}
.snarkComments .commentDelete {
background: none !important;
padding-left: 0 !important;
}
#dhtDebugInner {
margin-top: -20px !important;
}
}
/* end mini-mode */
/* end responsive layout */ /* end responsive layout */

76
installer/resources/themes/snark/light/snark.css
View File

@ -20,6 +20,7 @@ body {
url(images/button_tracker_active.png) no-repeat, url(images/button_tracker_active.png) no-repeat,
url(images/button_forum_hover.png) no-repeat, url(images/button_forum_hover.png) no-repeat,
url(images/button_forum_active.png) no-repeat, #a4a4cb; url(images/button_forum_active.png) no-repeat, #a4a4cb;
background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
} }
body.iframed { body.iframed {
@ -47,7 +48,8 @@ body.iframed {
user-select: none; user-select: none;
} }
a:focus img, input[type="image"]:focus, a.control:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, input[type="text"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus { a:focus img, input[type="image"]:focus, a.control:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus,
input[type="text"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
filter: drop-shadow(0 0 1px #6f072b) !important; filter: drop-shadow(0 0 1px #6f072b) !important;
} }
@ -344,15 +346,6 @@ tfoot th {
padding-bottom: 4px !important; 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 {
margin: 0 2px 3px 0 !important;
padding-right: 0 !important;
}
tfoot tr:nth-child(n+1) {
text-align: left;
}
#pagenav { #pagenav {
font-size: 8.5pt; font-size: 8.5pt;
color: #272e3f; color: #272e3f;
@ -376,9 +369,9 @@ tfoot tr:nth-child(n+1) {
} }
#pagenav a:active img { #pagenav a:active img {
background: #f60;
box-shadow: inset 3px 3px 3px #333; box-shadow: inset 3px 3px 3px #333;
box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333; box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
filter: none;
} }
#pagenav img.disable, #pagenav img.disable:hover, #pagenav a:active img.disable { #pagenav img.disable, #pagenav img.disable:hover, #pagenav a:active img.disable {
@ -825,19 +818,21 @@ tr:hover .percentBarText {
min-height: 16px; min-height: 16px;
} }
.snarkConfigTitle:hover, .toggleview:hover { .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%); background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
} }
.snarkConfigTitle a { .snarkConfigTitle a {
font-size: 11pt !important; font-size: 11pt !important;
display: inline-block;
width: 100%;
} }
.snarkConfigTitle:hover a, .snarkConfigTitle:focus a { .snarkConfigTitle:hover a, .snarkConfigTitle:focus a {
color: #f60 !important; color: #f60 !important;
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover { .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover {
font-size: 11pt; font-size: 11pt;
font-weight: bold; font-weight: bold;
padding: 3px 15px; padding: 3px 15px;
@ -850,7 +845,7 @@ tr:hover .percentBarText {
font-variant: small-caps !important; font-variant: small-caps !important;
box-shadow: 0 1px 2px #ddd; box-shadow: 0 1px 2px #ddd;
display: inline-block; display: inline-block;
min-width: 220px; min-width: 260px;
color: #559 !important; color: #559 !important;
} }
@ -859,7 +854,7 @@ tr:hover .percentBarText {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkConfigTitle, .snarkConfigTitle a, .toggleview,
.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
font-size: 14pt !important; font-size: 14pt !important;
padding: 3px 15px 4px; padding: 3px 15px 4px;
@ -870,7 +865,7 @@ tr:hover .percentBarText {
color: #559; color: #559;
} }
.snarkConfigTitle a:hover, .toggleview:hover { .snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, input.toggle_input:focus + .toggleview {
color: #f60 !important; color: #f60 !important;
cursor: pointer; cursor: pointer;
} }
@ -885,8 +880,8 @@ tr:hover .percentBarText {
vertical-align: middle; vertical-align: middle;
} }
.snarkConfigTitle:hover img, .toggleview:hover img { .snarkConfigTitle:hover img, .toggleview:hover img, input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus img {
filter: drop-shadow(0 0 1px #f60); filter: drop-shadow(0 0 1px #f60) !important;
} }
.snarkConfigTitle:active a img, .toggleview:active img { .snarkConfigTitle:active a img, .toggleview:active img {
@ -1488,7 +1483,11 @@ input.trackerannounce {
/* toggle create/add panel view */ /* toggle create/add panel view */
input.toggle_input { /* hide checkbox and use label as faux panel heading */ input.toggle_input { /* hide checkbox and use label as faux panel heading */
display: none; position: absolute;
opacity: 0;
z-index: -1;
height: 0 !important;
width: 0 !important;
} }
input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table { input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
@ -1604,7 +1603,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
padding: 5px; padding: 5px;
background: #efefff; background: #efefff;
box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(160,160,160,0.5); box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(160,160,160,0.5);
margin: -26px 0 -12px; margin: -19px 0 -12px;
} }
.dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug { .dhtDebug th b:first-of-type, .dhtDebug th b:first-of-type + br + hr.debug {
@ -1644,6 +1643,12 @@ hr.debug {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
@media screen and (-webkit-min-device-pixel-ratio:0) {
hr.debug {
height: 1px;
}
}
hr.debug:first-of-type { hr.debug:first-of-type {
background: transparent; background: transparent;
margin-top: -5px; margin-top: -5px;
@ -1658,7 +1663,9 @@ hr.debug:nth-child(n+7) {
hr.debug:last-child { hr.debug:last-child {
background: transparent; background: transparent;
margin-bottom: -4px; border: none;
height: 0;
margin-bottom: -8px;
} }
/* end debug */ /* end debug */
@ -2144,7 +2151,7 @@ body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddI
font-size: 9pt !important; font-size: 9pt !important;
} }
.snarkConfigTitle a, .snarkConfigTitle, label.toggleview { .snarkConfigTitle a, .snarkConfigTitle, .toggleview {
font-size: 10pt !important; font-size: 10pt !important;
} }
@ -2184,7 +2191,7 @@ b.alwaysShow {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle { .snarkConfigTitle a, .toggleview, .configsectionpanel .snarkConfigTitle {
font-size: 12pt !important; font-size: 12pt !important;
} }
} }
@ -2207,9 +2214,9 @@ b.alwaysShow {
} }
} }
@media screen and (max-width: 1400px) { @media screen and (min-width: 1000px) {
#dhtDebugInner { #dhtDebugInner {
margin-top: -22px !important; margin-top: -21px !important;
} }
} }
@ -2267,7 +2274,7 @@ body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textare
padding: 3px 15px !important; padding: 3px 15px !important;
} }
.snarkConfigTitle, .snarkConfigTitle a, label.toggleview { .snarkConfigTitle, .snarkConfigTitle a, .toggleview {
font-size: 12pt !important; font-size: 12pt !important;
} }
@ -2279,9 +2286,10 @@ input[type="submit"] {
height: 58px; height: 58px;
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
font-size: 12pt !important; font-size: 12pt !important;
padding: 4px 15px !important; padding: 4px 1px !important;
min-width: 300px;
} }
.snarkTorrentStatus b { .snarkTorrentStatus b {
@ -2296,8 +2304,8 @@ input[type="submit"] {
padding: 4px !important; padding: 4px !important;
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { #dhtDebugInner {
min-width: 240px; margin-top: -25px !important;
} }
.debuginfo td { .debuginfo td {
@ -2306,7 +2314,7 @@ input[type="submit"] {
padding-top: 4px !important; padding-top: 4px !important;
padding-bottom: 4px !important; padding-bottom: 4px !important;
} }
/*
.debugConnection { .debugConnection {
background: #337; background: #337;
border-radius: 2px; border-radius: 2px;
@ -2317,13 +2325,15 @@ input[type="submit"] {
font-size: 9pt !important; font-size: 9pt !important;
display: inline-block; display: inline-block;
} }
*/
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
.snarkConfigTitle a, label.toggleview, .snarkConfigTitle a, .toggleview,
.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
font-size: 14pt !important; font-size: 14pt !important;
padding: 3px 15px 4px !important; padding: 3px 1px 4px !important;
min-width: 300px;
} }
} }

37
installer/resources/themes/snark/midnight/snark.css
View File

@ -1098,14 +1098,14 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
display: inline-block; display: inline-block;
} }
.snarkConfigTitle, label.toggleview { .snarkConfigTitle, .toggleview {
font-size: 10pt; font-size: 10pt;
font-weight: bold; font-weight: bold;
font-variant: small-caps !important; font-variant: small-caps !important;
display: inline-block; display: inline-block;
min-width: 200px; min-width: 260px;
margin: -1px 0 -5px 0; margin: -1px 0 -5px 0;
padding: 3px 25px 3px 22px; padding: 3px 1px 3px 1px;
text-align: center !important; text-align: center !important;
letter-spacing: .15em; letter-spacing: .15em;
border: 1px solid #443da0; border: 1px solid #443da0;
@ -1115,12 +1115,12 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
text-shadow: 0 0 1px #000; text-shadow: 0 0 1px #000;
} }
.snarkConfigTitle:hover, label.toggleview:hover { .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
background: #002 !important; background: #002 !important;
background: linear-gradient(to bottom, #004 50%, #002 50%) !important; background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
} }
.snarkConfigTitle:active, label.toggleview:active { .snarkConfigTitle:active, .toggleview:active {
background: #003 !important; background: #003 !important;
background: linear-gradient(to bottom, #004 50%, #002 50%) !important; background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
box-shadow: inset 3px 3px 3px #000; box-shadow: inset 3px 3px 3px #000;
@ -1179,7 +1179,7 @@ _:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkT
transition: ease transform 0.3s; transition: ease transform 0.3s;
} }
.snarkConfigTitle img, label.toggleview img { .snarkConfigTitle img, .toggleview img {
margin-right: -2px; margin-right: -2px;
margin-top: -1px; margin-top: -1px;
filter: drop-shadow(0 0 1px #000); filter: drop-shadow(0 0 1px #000);
@ -1947,11 +1947,16 @@ input.trackerannounce {
/* toggle create/add panel view */ /* toggle create/add panel view */
input.toggle_input { input.toggle_input {
display: none; position: absolute;
opacity: 0;
z-index: -1;
height: 0 !important;
width: 0 !important;
} }
label.toggleview:hover { .toggleview:hover, .toggleview:hover, input.toggle_input:focus + .toggleview, .snarkConfigTitle a:focus, .snarkConfigTitle a:visited:focus {
cursor: pointer; cursor: pointer;
color: #652787 !important;
} }
input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_addtorrent:not(checked) + label + hr + table,
@ -1991,7 +1996,7 @@ input#toggle_createtorrent:checked + label + hr + table {
display: none; display: none;
} }
label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited { .toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
color: #7972d1 !important; color: #7972d1 !important;
} }
@ -2559,7 +2564,7 @@ b.alwaysShow {
max-width: 260px; max-width: 260px;
} }
.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction { .snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction, .peerinfo, .debuginfo {
display: none; display: none;
} }
@ -2715,7 +2720,7 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
font-size: 10.5pt !important; font-size: 10.5pt !important;
} }
.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkNav:link { .snarkConfigTitle, .snarkConfigTitle a, .toggleview, .snarkNav:link {
font-size: 11pt !important; font-size: 11pt !important;
} }
@ -2745,11 +2750,7 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
padding-left: 28px !important; padding-left: 28px !important;
} }
.snarkConfigTitle, .toggleview { .snarkConfigTitle, .snarkConfigTitle a, .toggleview {
padding: 4px 25px 4px 22px;
}
.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
font-size: 12.5pt !important; font-size: 12.5pt !important;
} }
@ -2762,8 +2763,8 @@ a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileN
padding-bottom: 5px !important; padding-bottom: 5px !important;
} }
.snarkConfigTitle, label.toggleview { .snarkConfigTitle, .toggleview {
min-width: 240px !important; min-width: 300px !important;
} }
.snarkMessages { .snarkMessages {

BIN
installer/resources/themes/snark/ubergine/images/details.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 834 B

After

Width:  |  Height:  |  Size: 2.3 KiB

754
installer/resources/themes/snark/ubergine/snark.css
View File

File diff suppressed because it is too large Load Diff

222
installer/resources/themes/snark/vanilla/snark.css
View File

@ -1,10 +1,6 @@
/* I2PSnark theme "Vanilla" by dr|z3d */ /* I2PSnark theme "Vanilla" by dr|z3d */
/* Now with 100% more chocolate */ /* Now with 100% more chocolate */
html {
min-height: 100%;
}
body { body {
background: #2f231a; background: #2f231a;
background: repeating-linear-gradient(to bottom, #9f948b 1px, #6f5b4c 1px, #bfa285 3px); background: repeating-linear-gradient(to bottom, #9f948b 1px, #6f5b4c 1px, #bfa285 3px);
@ -44,8 +40,22 @@ body.iframed:not(old) {
outline: none; outline: none;
} }
td *:focus { form {
filter: drop-shadow(0 0 1px #df0067); margin-bottom: 0;
}
p {
line-height: 150%;
}
hr {
color: #6f533e;
background:#6f533e;
height: 1px;
border: none;
width: 0%;
margin: 5px 0 7px 0;
text-align: center;
} }
::selection { ::selection {
@ -155,6 +165,8 @@ th a:active, th a:visited:active, td a:active, td a:visited:active {
font-size: 10pt; font-size: 10pt;
color: #3f271b; color: #3f271b;
background-size: 17px auto, 100% 100%, 100% 100% !important; background-size: 17px auto, 100% 100%, 100% 100% !important;
background-position: 12px center, center center, center center !important;
background-repeat: no-repeat !important;
border-radius: 0; border-radius: 0;
border: 1px solid #efe6e0; border: 1px solid #efe6e0;
text-shadow: 0 0 1px #fff5ef; text-shadow: 0 0 1px #fff5ef;
@ -186,54 +198,52 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
} }
.nav_main:link { .nav_main:link {
background: #fff7ef url(images/button_snark.png) 11px center no-repeat; background: #fff7ef url(images/button_snark.png) 11px center no-repeat !important;
background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px); background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px) !important;
background-size: 18px auto, 100% 100%, 100% 100% !important; background-size: 18px auto, 100% 100%, 100% 100% !important;
} }
.nav_forum:link { .nav_forum:link {
background: #fff7ef url(images/button_forum.png) 12px center no-repeat; background: #fff7ef url(images/button_forum.png);
background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px); background: url(images/button_forum.png), linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
} }
.nav_tracker:link { .nav_tracker:link {
background: #fff7ef url(images/button_tracker.png) 12px center no-repeat; background: #fff7ef url(images/button_tracker.png);
background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px); background: url(images/button_tracker.png), linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
background-size: 18px auto, 100% 100%, 100% 100% !important;
} }
.nav_main:hover, .nav_main:focus { .nav_main:hover, .nav_main:focus {
background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat; background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat !important;
background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%) !important;
background-size: 18px auto, 100% 100%, 100% 100% !important;
} }
.nav_forum:hover, .nav_forum:focus { .nav_forum:hover, .nav_forum:focus {
background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat; background: #ffeadf url(images/button_forum_hover.png);
background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
background-size: 17px auto, 100% 100%, 100% 100%;
} }
.nav_tracker:hover, .nav_tracker:focus { .nav_tracker:hover, .nav_tracker:focus {
background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat; background: #ffeadf url(images/button_tracker_hover.png);
background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%); background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
background-size: 17px auto, 100% 100%, 100% 100%;
} }
.nav_main:active { .nav_main:active {
background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat; background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat !important;
background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%) !important;
background-size: 18px auto, 100% 100%, 100% 100%; background-size: 18px auto, 100% 100%, 100% 100% !important;
} }
.nav_forum:active { .nav_forum:active {
background: #dfb899 url(images/button_forum_active.png) 12px; background: #dfb899 url(images/button_forum_active.png);
background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
background-size: 17px auto, 100% 100%, 100% 100%;
} }
.nav_tracker:active { .nav_tracker:active {
background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat; background: #dfb899 url(images/button_tracker_active.png);
background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%); background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
background-size: 17px auto, 100% 100%, 100% 100%;
} }
.snarkNav:last-child { .snarkNav:last-child {
@ -267,7 +277,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
text-align: left; text-align: left;
margin: 0 0 10px; margin: 0 0 10px;
padding: 0 3px; padding: 0 3px;
border-spacing: 0;
border: 1px solid #6f533e; border: 1px solid #6f533e;
border-radius: 2px; border-radius: 2px;
box-shadow: inset 0 0 6px 0 #3f2307; box-shadow: inset 0 0 6px 0 #3f2307;
@ -285,7 +294,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
} }
.snarkMessages:focus { .snarkMessages:focus {
box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #f60;
box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #df0067; box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #df0067;
filter: drop-shadow(0 0 2px rgba(200, 80, 0, 0.3)); filter: drop-shadow(0 0 2px rgba(200, 80, 0, 0.3));
} }
@ -330,12 +338,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
color: #f30 !important; color: #f30 !important;
} }
.snarkMessages p {
font-style: italic;
margin: 0;
text-align: right;
}
.snarkMessages img { .snarkMessages img {
float: right; float: right;
margin: -1px -3px 4px 4px; margin: -1px -3px 4px 4px;
@ -396,16 +398,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
/* end pagenav */ /* end pagenav */
pre {
width: 100%;
font: 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace !important;
padding: 0;
text-align: left !important;
height: 8px;
color: #731;
font-weight: bold !important;
}
table { table {
margin: 0 0 10px 0; margin: 0 0 10px 0;
border: 1px solid #6f533e; border: 1px solid #6f533e;
@ -476,11 +468,6 @@ tfoot tr:first-child th {
color: #2f1500 !important; color: #2f1500 !important;
} }
tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
margin: 0 2px 3px 0 !important;
padding-right: 0 !important;
}
.headerstatus { .headerstatus {
text-align: left; text-align: left;
} }
@ -521,15 +508,6 @@ tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) im
border-bottom: 1px solid #6f533e; 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 { .snarkTorrents tfoot th {
border-bottom: none !important; border-bottom: none !important;
white-space: normal !important; white-space: normal !important;
@ -619,10 +597,6 @@ th.snarkTorrentStatus {
padding: 0 3px !important; padding: 0 3px !important;
} }
.snarkTorrentDetails {
font-weight: bold;
}
.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp { .snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
width: 5%; width: 5%;
min-width: 40px; min-width: 40px;
@ -699,7 +673,6 @@ th.snarkTorrentStatus {
} }
.snarkTorrents tt { .snarkTorrents tt {
background: #313;
background: #7F654F; background: #7F654F;
color: #fff; color: #fff;
padding: 2px 3px; padding: 2px 3px;
@ -889,11 +862,10 @@ _:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
#torrentInfoControl { #torrentInfoControl {
border-top: 1px solid #6f533e; border-top: 1px solid #6f533e;
background: linear-gradient(to bottom, #efefef, #cfc7c2);
} }
#torrentInfoControl td { #torrentInfoControl td {
border-bottom: none !important;; border-bottom: none !important;
background: linear-gradient(to bottom, #efefef, #cfc7c2); background: linear-gradient(to bottom, #efefef, #cfc7c2);
text-align: right !important; text-align: right !important;
padding-right: 8px !important; padding-right: 8px !important;
@ -1164,32 +1136,41 @@ thead img.disable, img.disable:hover {
text-transform: capitalize; text-transform: capitalize;
} }
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { /* panel titles */
font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
font-size: 11pt !important; .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-weight: bold; font: bold 11pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
font-variant: small-caps !important; font-variant: small-caps !important;
padding: 4px 15px 2px 12px; padding: 4px 1px 2px;
margin: 0 0 -3px !important; margin: 0 0 -3px !important;
letter-spacing: 0.1em; letter-spacing: 0.1em;
border: 1px solid #111; border: 1px solid #111;
border-top: 0; border-top: 0;
background: #fff7ef; 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); 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; color: #444039 !important;
box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0; box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0;
display: inline-block; display: inline-block;
min-width: 220px; min-width: 280px;
vertical-align: middle; vertical-align: middle;
text-shadow: 0 0 1px #fff5ef; text-shadow: 0 0 1px #fff5ef;
} }
.snarkConfigTitle:hover, label.toggleview:hover { .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
background: #ffeadf; background: #ffeadf;
background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%); background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
color: #930 !important;
} }
.snarkConfigTitle:active, label.toggleview:active { input.toggle_input:focus + .toggleview img, .snarkConfigTitle a:focus {
mix-blend-mode: normal;
}
.snarkConfigTitle a:focus img {
filter: drop-shadow(0px 0 1px #7f6c5f);
}
.snarkConfigTitle:active, .toggleview:active {
box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513b; box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513b;
} }
@ -1226,68 +1207,54 @@ thead img.disable, img.disable:hover {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-size: 12pt !important; font-size: 12pt !important;
} }
} }
/* MS Edge fix */ /* MS Edge fix */
_:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, _:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, .toggleview,
.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover { .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
padding: 3px 15px 4px; padding: 3px 15px 4px;
font-size: 12pt !important; font-size: 12pt !important;
} }
.snarkConfigTitle a, label.toggleview { .snarkConfigTitle a {
color: #930 !important; display: inline-block;
color: #3F271B !important; width: 100%;
}
.snarkConfigTitle a, .toggleview {
color: #3f271b !important;
text-shadow: 0 0 1px #fff5ef; text-shadow: 0 0 1px #fff5ef;
} }
.snarkConfigTitle a:hover, label.toggleview:hover, .snarkConfigTitle a:focus, label.toggleview:focus { .snarkConfigTitle a:hover, .toggleview:hover, .snarkConfigTitle a:focus, .toggleview:focus {
color: #df0072 !important;
color: #930 !important; color: #930 !important;
} }
.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, .toggleview:active {
.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, label.toggleview:active {
color: #603110 !important; color: #603110 !important;
} }
.snarkConfigTitle img, label.toggleview img { .snarkConfigTitle img, .toggleview img {
margin: 1px -2px 3px 0; margin: 1px -2px 3px 0;
filter: drop-shadow(0 0 1px #7f6c5f) !important; filter: drop-shadow(0 0 1px #7f6c5f) !important;
mix-blend-mode: luminosity; mix-blend-mode: luminosity;
} }
.snarkConfigTitle:hover img, label.toggleview:hover img, .snarkConfigTitle:focus img, label.toggleview:focus img { .snarkConfigTitle:hover img, .toggleview:hover img, .snarkConfigTitle:focus img, .toggleview:focus img {
mix-blend-mode: normal; mix-blend-mode: normal;
} }
/* end panel titles */
.snarkConfig { .snarkConfig {
font-size: 8pt; font-size: 8pt;
width: 100%; width: 100%;
} }
form {
margin-bottom: 0;
}
p {
line-height: 150%;
}
hr {
color: #6f533e;
background:#6f533e;
height: 1px;
border: none;
width: 0%;
margin: 5px 0 7px 0;
text-align: center;
}
/* buttons & inputs */ /* buttons & inputs */
.script { .script {
@ -1839,8 +1806,10 @@ code, tt {
/* toggle create/add panel view */ /* toggle create/add panel view */
.toggle_input { /* hide checkbox and use label as faux panel heading */ input.toggle_input { /* hide checkbox and use label as faux panel heading */
display: none !important; position: absolute;
opacity: 0;
z-index: -1;
} }
.toggleview:hover { .toggleview:hover {
@ -1912,6 +1881,8 @@ code, tt {
font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif; font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
} }
/*
.from, .to { .from, .to {
font-family: sans-serif; font-family: sans-serif;
font-size: 12pt; font-size: 12pt;
@ -1948,6 +1919,8 @@ code, tt {
margin: 2px 3px !important; margin: 2px 3px !important;
} }
*/
.dhtDebug th { .dhtDebug th {
padding: 0 10px 10px; padding: 0 10px 10px;
background: #fff; background: #fff;
@ -2255,7 +2228,6 @@ td#bwHelp a {
border: 1px solid #6f533e; border: 1px solid #6f533e;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
/* box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);*/
border-collapse: separate; border-collapse: separate;
} }
@ -2388,6 +2360,10 @@ td#bwHelp a {
padding-left: 20px; padding-left: 20px;
} }
.commentAuthorName:empty {
display: none;
}
.commentText { .commentText {
white-space: normal; white-space: normal;
text-align: justify; text-align: justify;
@ -2528,9 +2504,8 @@ b.alwaysShow {
display: inline; display: inline;
} }
.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover, label.toggleview, .snarkConfigTitle a { .lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover, .toggleview, .snarkConfigTitle a {
font-size: 11pt !important; font-size: 11pt !important;
max-width: 220px !important
} }
.configsectionpanel .snarkConfigTitle { .configsectionpanel .snarkConfigTitle {
@ -2541,9 +2516,11 @@ td.snarkGraphicStatus img {
max-height: 16px; max-height: 16px;
} }
/*
.from, .to { .from, .to {
font-size: 11pt !important; font-size: 11pt !important;
} }
*/
.snarkTorrentOdd td, .snarkTorrentEven td { .snarkTorrentOdd td, .snarkTorrentEven td {
padding-top: 3px; padding-top: 3px;
@ -2613,7 +2590,7 @@ td.snarkGraphicStatus img {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-size: 12pt !important; font-size: 12pt !important;
letter-spacing: 0.1em !important; letter-spacing: 0.1em !important;
@ -2684,7 +2661,7 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-size: 11pt !important; font-size: 11pt !important;
letter-spacing: 0.1em !important; letter-spacing: 0.1em !important;
@ -2695,7 +2672,6 @@ _:-ms-lang(x), .snarkNav:link, .snarkNav:visited {
} }
} }
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button { body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button {
font-size: 9pt !important; font-size: 9pt !important;
@ -2784,6 +2760,10 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input
padding-right: 10px !important; padding-right: 10px !important;
} }
#totals {
word-spacing: 0.15em;
}
thead a img, thead img { thead a img, thead img {
max-height: 21px; max-height: 21px;
} }
@ -2802,7 +2782,7 @@ thead a img, thead img {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) {
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-size: 13pt !important; font-size: 13pt !important;
letter-spacing: 0.1em !important; letter-spacing: 0.1em !important;
@ -2877,8 +2857,8 @@ thead a img, thead img {
} }
.snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, label.toggleview { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, .toggleview {
min-width: 240px !important; min-width: 300px !important;
font-size: 12pt !important; font-size: 12pt !important;
} }
@ -2924,7 +2904,7 @@ tr#torrentInfoStats td {
} }
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) { @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover, .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active { .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
font-size: 14pt !important; font-size: 14pt !important;
letter-spacing: 0.1em !important; letter-spacing: 0.1em !important;
@ -2959,7 +2939,7 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img
max-height: 18px; max-height: 18px;
} }
.snarkTorrentUploaded, .snarkTorrentRateUp { .snarkTorrentUploaded, .snarkTorrentRateUp, .peerinfo, .debuginfo {
display: none; display: none;
} }
@ -3049,6 +3029,10 @@ th.snarkTorrentStatus a img, .snarkTorrentETA a img, .snarkTrackerDetails a img
background: none !important; background: none !important;
padding-left: 0 !important; padding-left: 0 !important;
} }
#dhtDebugInner {
margin-top: -24px !important;
}
} }
/* end mini-mode */ /* end mini-mode */