I2PSnark changes:

- Add spacing between File Info/ Directory Listing for all themes
- Tooltip for tracker removal eraser icon
- Theme tweaks and whitespace removal
This commit is contained in:
str4d
2017-02-10 16:34:33 +00:00
parent c4e7b1a799
commit a22bf6b4a4
7 changed files with 345 additions and 190 deletions

View File

@@ -62,7 +62,7 @@ body.iframed {
padding: 15px 10px 13px;
border: 1px solid #101;
border-radius: 0 0 4px 4px;
box-shadow: inset 0 0 3px 1px #212;
box-shadow: inset 0 0 0 1px #3f173f, inset 0 0 3px 1px #212;
filter: drop-shadow(0 1px 4px #212);
-webkit-filter: drop-shadow(0 1px 1px #000);
background: #101 url(images/snarktopnav.png) repeat-x scroll center center;
@@ -79,7 +79,7 @@ body.iframed {
}
.iframed .snarknavbar {
padding-bottom: 15px;
padding-bottom: 16px;
margin-top: 0 !important;
margin-bottom: -6px !important;
width: auto;
@@ -151,14 +151,14 @@ body.iframed {
@media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkRefresh img {
margin: 0 -4px 0 -5px;
margin: -2px -7px 0 -5px;
}
}
.snarkRefresh:last-child[href="/i2psnark/"] {
border-radius: 2px;
margin: -5px 0 -4px !important;
padding: 4px 12px 3px !important;
padding: 5px 12px 4px 13px !important;
display: inline-block;
}
@@ -178,7 +178,7 @@ body.iframed {
background: #2a192a url(images/hat.png) no-repeat scroll right center;
background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #2a192a 0%, #202 100%);
background-size: 80px 83px, 100% 100%;
box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6);
box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6);
outline: none;
filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5));
-webkit-filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5));
@@ -255,7 +255,7 @@ pre {
text-align: left !important;
height: 8px;
color: #35f;
font-weight: bold !important;
font-weight: bold !important;
}
table {
@@ -377,7 +377,7 @@ tfoot tr:nth-child(n+1) {
@media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes webkit/blink double border */
.snarkTorrents {
border-top: 1px solid transparent;
border-top: 1px solid transparent;
}
}
@@ -402,7 +402,7 @@ tfoot tr:nth-child(n+1) {
.snarkTorrents thead th:nth-child(2) {
text-align: left;
min-width: 50px;
}
}
.snarkTorrents tfoot {
background: #101;
@@ -431,21 +431,18 @@ tfoot tr:nth-child(n+1) {
}
.snarkTorrents tfoot th:nth-child(n+2) {
word-spacing: -0.2em;
font-variant: all-small-caps;
word-spacing: -0.4em;
text-align: right;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
font-variant: normal !important;
}
}
.snarkTorrents tfoot th:nth-child(2) {
text-align: center;
}
.snarkTorrents tfoot tt {
margin-left: -4px;
}
.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
width: 16px;
padding: 2px 0;
@@ -460,7 +457,7 @@ tfoot tr:nth-child(n+1) {
}
.snarkTorrents tt {
font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono
font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", Courier, mono;
color: #cc0;
margin-left: 2px;
font-weight: bold;
@@ -513,6 +510,11 @@ td:first-child {
white-space: nowrap;
}
/* MS Edge 14+ fix */
_:-ms-lang(x), .snarkTorrentAction {
width: 72px !important;
}
.snarkTorrents th:last-child {
white-space: nowrap !important;
text-align: center;
@@ -552,7 +554,6 @@ td:first-child {
.snarkTorrentStatus {
padding: 2px 2px 2px 0;
line-height: 110%;
/* min-width: 75px;*/
text-align: left !important;
}
@@ -637,7 +638,7 @@ 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: -12px;
margin-left: -10px;
color: #cc0;
}
@@ -660,6 +661,11 @@ table.snarkTorrents tbody tr:hover {
box-shadow: inset 0 1px 1px 0 #939;
}
/* MS Edge 14+ fix */
_:-ms-lang(x), table.snarkTorrents tbody tr:hover {
box-shadow: none !important;
}
table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody tr:hover td .snarkFileName {
color: #fff !important;
}
@@ -676,7 +682,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t
}
.snarkFileName {
padding: 4px 0 !important;
padding: 4px 0 !important;
text-align: left !important;
font-size: 8pt !important;
white-space: nowrap;
@@ -694,7 +700,7 @@ table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody t
font-size: 7.5pt;
text-align: left !important;
white-space: nowrap;
max-width: 250px;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -785,6 +791,12 @@ table.snarkDirInfo {
-webkit-filter: drop-shadow(0 0 1px #000);
}
/* MS Edge 14+ fix */
_:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
filter: none !important;
-webkit-filter: none !important;
}
.snarkDirInfo td, .SnarkDirInfo th {
min-width: 0 !important;
border-bottom: 1px solid #202;
@@ -826,7 +838,7 @@ table.snarkDirInfo {
font-weight: bold;
font-style: italic;
word-spacing: -0.4em;
}
}
.thumb {
max-width: 16px;
@@ -879,13 +891,16 @@ table#trackerselect {
background: #101;
border-radius: 2px;
color: #fbf;
margin-left: 3px;
padding: 2px 4px;
box-shadow: inset 0 0 0 1px #212;
}
.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: 3px 18px;
padding: 4px 18px 3px;
margin: 5px 0 10px 0 !important;
border: 1px solid #101;
border-top: none;
@@ -905,16 +920,15 @@ table#trackerselect {
}
.snarkConfigTitle:hover, label.toggleview:hover {
background: linear-gradient(to bottom, #5f475d 0%, #4F3B4F 50%, #1f001f 50%, #1f001f 100%);
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;
box-shadow: inset 0 0 1px #7f2f7f, inset 1px 1px 3px 1px #0d000d;
}
.snarkConfigTitle img, label.toggleview img {
margin-right: -3px;
margin-bottom: 1px;
margin: 1px -3px 2px 0;
vertical-align: middle;
filter: drop-shadow(0 0 1px #000);
-webkit-filter: drop-shadow(0 0 1px #000);
@@ -987,7 +1001,7 @@ a.control, a.controld, a.control:active {
color: #1c081e;
font-weight: bold;
margin: 5px 2px !important;
padding: 4px 6px 4px 4px;
padding: 4px 6px 4px 4px;
text-shadow: 0 0 #410;
white-space: nowrap;
filter: drop-shadow(0 0 1px #313) !important;
@@ -1057,7 +1071,7 @@ input {
padding: 3px 4px !important;
border-radius: 2px;
border: 1px solid #101;
background: #212 url(images/graytile.png);
background: #212 url(images/graytile.png);
color: #f60;
margin: 2px 4px;
}
@@ -1071,7 +1085,7 @@ input.r {
input[type=submit] {
color: #1c081e;
background: #989;
background: linear-gradient(to bottom, #989 0%, #878 100%);
background: linear-gradient(to bottom, #989 0%, #878 100%);
border: 1px inset #bbb;
padding: 4px 2px !important;
filter: drop-shadow(0 0 1px #313);
@@ -1157,8 +1171,8 @@ thead a:active img {
input[type="submit"]:disabled:active, a.control:disabled:active {
filter: drop-shadow(0 0 1px #101);
-webkit-filter: drop-shadow(0 0 1px #101);
}
-webkit-filter: drop-shadow(0 0 1px #101);
}
#pagenav {
letter-spacing: 0.1em;
@@ -1221,7 +1235,7 @@ input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofi
background: #d60;
background: linear-gradient(to bottom, #d60, #c50);
color: #fff;
box-shadow: none;
box-shadow: none;
}
input[type=radio] {
@@ -1262,8 +1276,8 @@ input[name="upBW"] + i::before {
}
input.default {
width: 1px;
height: 1px;
width: 1px;
height: 1px;
visibility: hidden;
}
@@ -1304,7 +1318,7 @@ input.cancel, input.cancel:active {
input.cancel:hover, input.cancel:focus {
background: #767 url(images/cancel.png) no-repeat 4px center;
background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%);
background: url(images/cancel.png) no-repeat 4px center, linear-gradient(to bottom, #767 0%, #989 100%);
}
input.create, input.create:active {
@@ -1375,7 +1389,7 @@ input.stoptorrent:hover, input.stoptorrent:focus {
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="submit"], input[type="reset"], a.control {
padding-left: 21px !important;
padding-left: 21px !important;
}
}
@@ -1566,7 +1580,7 @@ img[src$="magnet.png"] {
border: 1px solid #000;
color: #ddd;
border-radius: 4px;
box-shadow: inset 0 0 3px 0 #101;
box-shadow: inset 0 0 3px 0 #101;
word-wrap: break-word;
text-align: center;
background: #545 url(images/configuration.png) no-repeat scroll right center;
@@ -1577,9 +1591,9 @@ img[src$="magnet.png"] {
-webkit-filter: drop-shadow(0 0 1px #515);
}
.configsectionpanel, .configsectionpanel td {
.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo {
font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
font-size: 10pt !important;
font-size: 9pt !important;
}
.iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
@@ -1593,7 +1607,8 @@ img[src$="magnet.png"] {
}
.addtorrentsection td:first-child, .newtorrentsection td:first-child {
width: 200px;
width: 10%;
white-space: nowrap;
}
.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
@@ -1606,7 +1621,8 @@ img[src$="magnet.png"] {
}
.configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
width: 550px;
min-width: 550px;
width: 60%;
}
.configsectionpanel textarea {
@@ -1670,6 +1686,7 @@ code {
border-radius: 2px 0 0 2px;
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;
width: 5%;
}
.trackerconfig th:last-child {
@@ -1686,11 +1703,11 @@ code {
}
.trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
text-align: left !important;
text-align: left !important;
}
.trackerconfig td:first-child {
text-align: right !important;
text-align: right !important;
}
.trackerconfig tr:nth-child(2) td {
@@ -1736,7 +1753,7 @@ input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent
/* enable to display panels by default on broken webkit based browsers (midori fix) */
/* note that midori has other issues c. v5.10, best avoided */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@media screen and (-webkit-min-device-pixel-ratio:0) {
input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
display: table;
}
@@ -1776,6 +1793,12 @@ label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:ac
transition: ease transform 0.3s 0s;
}
/* MS Edge 14+ fix */
_:-ms-lang(x), * {
filter: none !important;
-webkit-filter: none !important;
}
/* responsive layout */
@media screen and (min-width: 1400px) {
@@ -1784,11 +1807,21 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus
}
.snarknavbar {
padding: 18px 10px 16px;
padding: 17px 10px 16px;
}
.snarknavbar img {
margin-right: -8px;
margin: -2px -9px 0 -5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.snarkRefresh img {
margin: -2px -8px 0 -5px;
}
.snarkConfigTitle, label.toggleview {
font-size: 14pt !important;
}
}
.snarkRefresh:link {
@@ -1803,14 +1836,27 @@ body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus
padding-left: 13px !important;
}
.snarkRefresh:last-child[href="/i2psnark/"] {
padding: 6px 12px 5px 15px !important;
margin: -7px 0 -6px !important;
}
.snarkTorrents tt {
font-size: 10pt;
color: #cc0;
}
tt, code, .snarkMessages, input, input[type="submit"], input[type="reset"], select, select option, button, textarea {
font-size: 9pt !important;
}
.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo {
font-size: 10pt !important;
}
.addtorrentsection td:first-child, .newtorrentsection td:first-child {
width: 200px;
}
select {
padding-top: 4px;
padding-bottom: 4px;
@@ -1820,3 +1866,5 @@ select:nth-child(2) {
margin-left: -14px !important;
}
}
/* end responsive layout */