Changeset 4da95af


Ignore:
Timestamp:
Jun 3, 2017 2:03:56 PM (3 years ago)
Author:
str4d <str4d@…>
Branches:
master
Children:
b28cc94
Parents:
a9bf1e29
Message:

i2psnark:

  • Reorder .snarkCommentInfo sections so my rating / average rating is located directly above posted comments/ratings in .snarkComments
    • Allows us to visually join the two tables and provide comment/rating continuity
  • If author name for comments is configured, display it in .snarkCommentInfo table header
  • Full status tooltips for status icons in .snarkTorrents
    • This ensures we still retain full info in mini-mode in light/midnight themes in addition to providing more descriptive text (for new users)
  • Rework td/th classes for .snarkTorrents so each column (both th + td) now belongs to a given class
    • Removes the need to overuse nth-child qualifiers to target columns
    • Allows easier column-alignment/spacing/widths
  • Stop .snarkTorrentStatus class being incorrectly applied to .peerinfo columns
  • Spans for DHT peers / Dest in #totals
    • Ensures they don't break on narrower screens in Russian etc.
  • Span for .snarkTorrentInfo info hash
    • So we can highlight and select with a single click
  • Delete icon for delete comments td
  • Overhaul .snarkTorrents column widths
    • Provides more predictable scaling experience, tidier layout
  • CSS tidyups; deduplicate .snarkTorrents classes and move to their own commented section
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java

    ra9bf1e29 r4da95af  
    453453        String currentSort = req.getParameter("sort");
    454454        boolean showSort = total > 1;
    455         out.write("<tr><th>");
     455        out.write("<tr><th class=\"snarkGraphicStatus\">");
    456456        String sort = ("2".equals(currentSort)) ? "-2" : "2";
    457457        if (showSort) {
     
    465465        if (showSort)
    466466            out.write("</a>");
    467         out.write("</th>\n<th>");
     467        out.write("</th>\n<th class=\"snarkTorrentStatus\">");
    468468        if (_manager.util().connected() && !snarks.isEmpty()) {
    469469            out.write(" <a href=\"" + _contextPath + '/');
     
    481481                out.write(toThemeImg("showpeers", tx, tx));
    482482            }
    483             out.write("</a><br>\n");
     483            out.write("</a>\n");
    484484        }
    485485        out.write("</th>\n<th colspan=\"2\" align=\"left\">");
     
    511511            writePageNav(out, req, start, pageSize, total, noThinsp);
    512512        }
    513         out.write("</th>\n<th align=\"right\">");
     513        out.write("</th>\n<th class=\"snarkTorrentETA\" align=\"right\">");
    514514        if (_manager.util().connected() && !snarks.isEmpty()) {
    515515            if (showSort) {
     
    526526                out.write("</a>");
    527527        }
    528         out.write("</th>\n<th align=\"right\">");
     528        out.write("</th>\n<th class=\"snarkTorrentDownloaded\" align=\"right\">");
    529529        // cycle through sort by size or downloaded
    530530        boolean isDlSort = false;
     
    551551        if (showSort)
    552552            out.write("</a>");
    553         out.write("</th>\n<th align=\"right\">");
     553        out.write("</th>\n<th class=\"snarkTorrentUploaded\" align=\"right\">");
    554554        boolean isRatSort = false;
    555555        if (!snarks.isEmpty()) {
     
    583583                out.write("</a>");
    584584        }
    585         out.write("</th>\n<th align=\"right\">");
     585        out.write("</th>\n<th class=\"snarkTorrentRateDown\" align=\"right\">");
    586586        if (_manager.util().connected() && !snarks.isEmpty()) {
    587587            if (showSort) {
     
    598598                out.write("</a>");
    599599        }
    600         out.write("</th>\n<th align=\"right\">");
     600        out.write("</th>\n<th class=\"snarkTorrentRateUp\" align=\"right\">");
    601601        if (_manager.util().connected() && !snarks.isEmpty()) {
    602602            if (showSort) {
     
    613613                out.write("</a>");
    614614        }
    615         out.write("</th>\n<th align=\"center\">");
     615        out.write("</th>\n<th class=\"snarkTorrentAction\" align=\"center\">");
    616616
    617617        if (_manager.isStopping()) {
     
    675675        if (total == 0) {
    676676            out.write("<tr class=\"snarkTorrentNoneLoaded\">" +
    677                       "<td class=\"snarkTorrentNoneLoaded\"" +
    678                       " colspan=\"11\"><i>");
     677                      "<td colspan=\"11\"><i>");
    679678            out.write(_t("No torrents loaded."));
    680679            out.write("</i></td></tr>\n");
    681680        } else /** if (snarks.size() > 1) */ {
    682681            out.write("<tfoot><tr>\n" +
    683                       "    <th align=\"left\" colspan=\"6\">");
     682                      "    <th id=\"snarkTorrentTotals\" align=\"left\" colspan=\"6\">");
    684683            out.write("<span id=\"totals\">");
    685684            out.write(_t("Totals"));
     
    696695                int dhts = dht.size();
    697696                if (dhts > 0) {
    698                     out.write(", ");
     697                    out.write(", <span>");
    699698                    out.write(ngettext("1 DHT peer", "{0} DHT peers", dhts));
     699                    out.write("</span>");
    700700                }
    701701            }
     
    703703            if(!IPString.equals("unknown")) {
    704704                // Only truncate if it's an actual dest
    705                 out.write(";&nbsp;");
     705                out.write(";&nbsp;<span id=\"ourDest\">");
    706706                out.write(_t("Dest"));
    707707                out.write(":&nbsp;<tt title=\"");
     
    709709                out.write("\">");
    710710                out.write(IPString.substring(0, 4));
    711                 out.write("</tt>");
     711                out.write("</tt></span>");
    712712            }
    713713            out.write("</span>");
    714714            out.write("</th>\n");
    715715            if (_manager.util().connected() && total > 0) {
    716                 out.write("    <th align=\"right\">" + formatSize(stats[0]) + "</th>\n" +
    717                       "    <th align=\"right\">" + formatSize(stats[1]) + "</th>\n" +
    718                       "    <th align=\"right\">" + formatSize(stats[2]) + "ps</th>\n" +
    719                       "    <th align=\"right\">" + formatSize(stats[3]) + "ps</th>\n" +
    720                       "    <th></th>");
     716                out.write("    <th class=\"snarkTorrentDownloaded\" align=\"right\">" + formatSize(stats[0]) + "</th>\n" +
     717                      "    <th class=\"snarkTorrentUploaded\" align=\"right\">" + formatSize(stats[1]) + "</th>\n" +
     718                      "    <th class=\"snarkTorrentRateDown\" align=\"right\">" + formatSize(stats[2]) + "ps</th>\n" +
     719                      "    <th class=\"snarkTorrentRateUp\" align=\"right\">" + formatSize(stats[3]) + "ps</th>\n" +
     720                      "    <th class=\"snarkTorrentAction\"></th>");
    721721            } else {
    722722                out.write("<th colspan=\"5\"></th>");
    723723            }
     724            // TODO javascript handler to remember checkbox status for debug panel visibility (otherwise resets with ajax/meta refresh)
    724725            if (dht != null) {
    725726                if (showDebug) {
     
    15831584                if (remaining == 0) {
    15841585                    img = "seeding";
    1585                     txt = _t("Seeding");
     1586                    txt = _t("Seeding to {0} of {1} peers in swarm", curPeers, knownPeers);
    15861587                } else {
    15871588                    // partial
    15881589                    img = "complete";
    15891590                    txt = _t("Complete");
     1591                    if (curPeers > 0) {
     1592                        txt = txt + " (" + _t("Seeding to {0} of {1} peers in swarm", curPeers, knownPeers) + ")";
     1593                    }
    15901594                }
    15911595                if (curPeers > 0 && !showPeers) {
     
    16071611        } else {
    16081612            if (isRunning && curPeers > 0 && downBps > 0 && !showPeers) {
    1609                 statusString = toThemeImg("downloading", "", _t("OK")) + "</td>" +
     1613                statusString = toThemeImg("downloading", "", _t("OK") + " (" + _t("Downloading from {0} of {1} peers in swarm", curPeers, knownPeers) + ")") + "</td>" +
    16101614                               "<td class=\"snarkTorrentStatus\"><b>" + _t("OK") +
    16111615                               ":</b> <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
     
    16131617                               ngettext("1 peer", "{0} peers", knownPeers) + "</a>";
    16141618            } else if (isRunning && curPeers > 0 && downBps > 0) {
    1615                 statusString = toThemeImg("downloading", "", _t("OK")) + "</td>" +
     1619                statusString = toThemeImg("downloading", "", _t("OK") + " (" + _t("Downloading from {0} of {1} peers in swarm", curPeers, knownPeers) + ")") + "</td>" +
    16161620                               "<td class=\"snarkTorrentStatus\"><b>" + _t("OK") +
    16171621                               ":</b> " + curPeers + thinsp(noThinsp) +
    16181622                               ngettext("1 peer", "{0} peers", knownPeers);
    16191623            } else if (isRunning && curPeers > 0 && !showPeers) {
    1620                 statusString = toThemeImg("stalled", "", _t("Stalled")) + "</td>" +
     1624                statusString = toThemeImg("stalled", "", _t("Stalled") + " (" + _t("Connected to {0} of {1} peers in swarm", curPeers, knownPeers) + ")") + "</td>" +
    16211625                               "<td class=\"snarkTorrentStatus\"><b>" + _t("Stalled") +
    16221626                               ":</b> <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
     
    16241628                               ngettext("1 peer", "{0} peers", knownPeers) + "</a>";
    16251629            } else if (isRunning && curPeers > 0) {
    1626                 statusString = toThemeImg("stalled", "", _t("Stalled")) + "</td>" +
     1630                statusString = toThemeImg("stalled", "", _t("Stalled") + " (" + _t("Connected to {0} of {1} peers in swarm", curPeers, knownPeers) + ")") + "</td>" +
    16271631                               "<td class=\"snarkTorrentStatus\"><b>" + _t("Stalled") +
    16281632                               ":</b> " + curPeers + thinsp(noThinsp) +
    16291633                               ngettext("1 peer", "{0} peers", knownPeers);
    16301634            } else if (isRunning && knownPeers > 0) {
    1631                 statusString = toThemeImg("nopeers", "", _t("No Peers")) + "</td>" +
     1635                statusString = toThemeImg("nopeers", "", _t("No Peers") + " (" + _t("Connected to {0} of {1} peers in swarm", curPeers, knownPeers) + ")") + "</td>" +
    16321636                               "<td class=\"snarkTorrentStatus\"><b>" + _t("No Peers") +
    16331637                               ":</b> 0" + thinsp(noThinsp) + knownPeers ;
     
    16421646
    16431647        out.write("<tr class=\"" + rowClass + "\" id=\"" + b64Short + "\">");
    1644         out.write("<td class=\"center\">");
     1648        out.write("<td class=\"snarkGraphicStatus\" align=\"center\">");
    16451649        out.write(statusString + "</td>\n\t");
    16461650
    16471651        // (i) icon column
    1648         out.write("<td>");
     1652        out.write("<td class=\"snarkTrackerDetails\">");
    16491653        if (isValid) {
    16501654            String announce = meta.getAnnounce();
     
    16611665        String encodedBaseName = encodePath(fullBasename);
    16621666        // File type icon column
    1663         out.write("</td>\n<td>");
     1667        out.write("</td>\n<td class=\"snarkTorrentDetails\">");
    16641668        if (isValid) {
    16651669            // Link to local details page - note that trailing slash on a single-file torrent
     
    18461850                if (!peer.isConnected())
    18471851                    continue;
    1848                 out.write("<tr class=\"peerinfo " + rowClass + "\"><td title=\"");
     1852                out.write("<tr class=\"peerinfo " + rowClass + "\"><td class=\"snarkGraphicStatus\" title=\"");
    18491853                out.write(_t("Peer attached to swarm"));
    18501854                out.write("\"></td><td colspan=\"4\">");
     
    18781882                    out.write(" inactive " + (peer.getInactiveTime() / 1000) + "s");
    18791883                out.write("</td>\n\t");
    1880                 out.write("<td class=\"snarkTorrentStatus\">");
     1884                out.write("<td class=\"snarkTorrentETA\">");
    18811885                out.write("</td>\n\t");
    1882                 out.write("<td align=\"right\" class=\"snarkTorrentStatus\">");
     1886                out.write("<td align=\"right\" class=\"snarkTorrentDownloaded\">");
    18831887                float pct;
    18841888                if (isValid) {
     
    19011905                }
    19021906                out.write("</td>\n\t");
    1903                 out.write("<td class=\"snarkTorrentStatus\">");
     1907                out.write("<td class=\"snarkTorrentUploaded\">");
    19041908                out.write("</td>\n\t");
    1905                 out.write("<td align=\"right\" class=\"snarkTorrentStatus\">");
     1909                out.write("<td align=\"right\" class=\"snarkTorrentRateDown\">");
    19061910                if (needed > 0) {
    19071911                    if (peer.isInteresting() && !peer.isChoked()) {
     
    19251929                }
    19261930                out.write("</td>\n\t");
    1927                 out.write("<td align=\"right\" class=\"snarkTorrentStatus\">");
     1931                out.write("<td align=\"right\" class=\"snarkTorrentRateUp\">");
    19281932                if (isValid && pct < 100.0) {
    19291933                    if (peer.isInterested() && !peer.isChoking()) {
     
    19411945                }
    19421946                out.write("</td>\n\t");
    1943                 out.write("<td class=\"snarkTorrentStatus\">");
     1947                out.write("<td class=\"snarkTorrentAction\">");
    19441948                out.write("</td></tr>\n\t");
    19451949                if (showDebug)
    1946                     out.write("<tr class=\"debuginfo " + rowClass + "\"><td></td><td colspan=\"10\" align=\"right\">" + peer.getSocket() + "</td></tr>");
     1950                    out.write("<tr class=\"debuginfo " + rowClass + "\"><td class=\"snarkGraphicStatus\"></td><td colspan=\"10\">" + peer.getSocket() + "</td></tr>");
    19471951            }
    19481952        }
     
    24492453        out.write(":</td><td colspan=\"2\"><input type=\"text\" name=\"nofilter_commentsName\" spellcheck=\"false\" value=\""
    24502454                      + DataHelper.escapeHTML(_manager.util().getCommentsName()) + "\" size=\"32\" maxlength=\"32\" title=\"");
    2451             out.write(_t("Set the author name for your comments"));
    2452             out.write("\" placeholder=\"");
    2453             out.write(_t("required to post comments"));
    2454             out.write("\" >" +
    2455                   "</td></tr>\n");
     2455            out.write(_t("Set the author name for your comments and ratings"));
     2456            out.write("\" ></td></tr>\n");
    24562457
    24572458        //          "<tr><td>");
     
    29242925            buf.append("</td><td><b>")
    29252926               .append(_t("Info hash"))
    2926                .append(":</b> ")
     2927               .append(":</b> <span id=\"infohash\">")
    29272928               .append(hex.toUpperCase(Locale.US))
    2928                .append("</td></tr>\n");
     2929               .append("</span></td></tr>\n");
    29292930
    29302931            String announce = null;
     
    33093310            String rowClass = (rowEven ? "snarkTorrentEven" : "snarkTorrentOdd");
    33103311            rowEven = !rowEven;
    3311             buf.append("<TR class=\"").append(rowClass).append("\">");
     3312            buf.append("<tr class=\"").append(rowClass).append("\">");
    33123313
    33133314            // Get completeness and status string
     
    33593360            String icon = toIcon(item);
    33603361
    3361             buf.append("<TD class=\"snarkFileIcon\">");
     3362            buf.append("<td class=\"snarkFileIcon\">");
    33623363            if (complete) {
    33633364                buf.append("<a href=\"").append(path).append("\">");
     
    33743375                buf.append(toImg(icon));
    33753376            }
    3376             buf.append("</TD><TD class=\"snarkFileName\">");
     3377            buf.append("</td><td class=\"snarkFileName\">");
    33773378            if (complete)
    33783379                buf.append("<a href=\"").append(path).append("\">");
     
    33803381            if (complete)
    33813382                buf.append("</a>");
    3382             buf.append("</TD><TD ALIGN=right class=\"snarkFileSize\">");
     3383            buf.append("</td><td align=right class=\"snarkFileSize\">");
    33833384            if (!item.isDirectory())
    33843385                buf.append(DataHelper.formatSize2(length)).append('B');
    3385             buf.append("</TD><TD class=\"snarkFileStatus\">");
     3386            buf.append("</td><td class=\"snarkFileStatus\">");
    33863387            //buf.append(dfmt.format(new Date(item.lastModified())));
    33873388            buf.append(status);
    3388             buf.append("</TD>");
     3389            buf.append("</td>");
    33893390            if (showPriority) {
    33903391                buf.append("<td class=\"priority\">");
     
    34143415                buf.append("</td>");
    34153416            }
    3416             buf.append("</TR>\n");
     3417            buf.append("</tr>\n");
    34173418        }
    34183419        if (showSaveButton) {
     
    34503451            CommentSet comments = snark.getComments();
    34513452
    3452             buf.append("<table class=\"snarkCommentInfo\"><tr><th colspan=\"3\">")
     3453            buf.append("<div id=\"snarkCommentSection\"><table class=\"snarkCommentInfo\">\n<tr><th colspan=\"3\">")
    34533454               .append(_t("Ratings and Comments"));
    34543455            if (esc && _manager.util().getCommentsName().length() == 0) {
    34553456                buf.append("&nbsp;&nbsp;&nbsp;<span id=\"nameRequired\">");
    3456                 buf.append(_t("Author name required to post comments"));
     3457                buf.append(_t("Author name required to rate or comment"));
    34573458                buf.append("&nbsp;&nbsp;<a href=\"").append(_contextPath).append("/configure#configureAuthor\">");
    34583459                buf.append(_t("[Configure]"));
    34593460                buf.append("</a></span>");
    3460             }
    3461 
    3462             buf.append("</th><tr id=\"commentsConfig\"><td>");
     3461            } else {
     3462                buf.append("&nbsp;&nbsp;&nbsp;<span id=\"nameRequired\"><span class=\"commentAuthorName\" title=\"")
     3463                   .append(_t("Your author name for published comments and ratings"))
     3464                   .append("\">");
     3465                buf.append(DataHelper.escapeHTML(_manager.util().getCommentsName()));
     3466                buf.append("</span></span>");
     3467            }
     3468
     3469            buf.append("</th></tr>\n<tr id=\"commentsConfig\"><td>");
    34633470            buf.append(_t("Comments"));
    34643471            buf.append(":</td><td><label><input type=\"checkbox\" class=\"optbox\" name=\"enableComments\" id=\"enableComments\" ");
     
    34733480                buf.append("<input type=\"submit\" name=\"setCommentsEnabled\" value=\"");
    34743481                buf.append(_t("Save Preference"));
    3475                 buf.append("\" class=\"accept\">\n");
    3476             }
    3477             buf.append("</td></tr>");
     3482                buf.append("\" class=\"accept\">");
     3483            }
     3484            buf.append("</td></tr>\n");
     3485
     3486            // new rating / comment form
     3487            buf.append("<tr id=\"newRating\">\n");
     3488            if (er) {
     3489                buf.append("<td>\n<select name=\"myRating\">\n");
     3490                for (int i = 5; i >= 0; i--) {
     3491                    buf.append("<option value=\"").append(i).append("\" ");
     3492                    if (i == myRating)
     3493                        buf.append("selected=\"selected\"");
     3494                    buf.append('>');
     3495                    if (i != 0) {
     3496                        buf.append("★ ").append(ngettext("1 star", "{0} stars", i));
     3497                    } else {
     3498                        buf.append("☆ ").append(_t("No rating"));
     3499                    }
     3500                    buf.append("</option>\n");
     3501                }
     3502                buf.append("</select>\n</td>");
     3503            }
     3504            if (esc) {
     3505                buf.append("<td id=\"addCommentText\"><textarea name=\"nofilter_newComment\" cols=\"44\" rows=\"4\"></textarea></td>");
     3506            } else {
     3507                buf.append("<td></td>");
     3508            }
     3509            buf.append("<td class=\"commentAction\"><input type=\"submit\" name=\"addComment\" value=\"");
     3510            if (er && esc)
     3511                buf.append(_t("Rate and Comment"));
     3512            else if (er)
     3513                buf.append(_t("Rate Torrent"));
     3514            else
     3515                buf.append(_t("Add Comment"));
     3516            buf.append("\" class=\"accept\"></td>\n");
     3517            buf.append("</tr>\n");
    34783518
    34793519            if (comments != null) {
     
    35023542
    35033543                            buf.append(_t("Average Rating")).append(":</td><td colspan=\"2\">");
    3504                             buf.append(_t("No community ratings currently available for this torrent"));
     3544                            buf.append(_t("No community ratings currently available"));
    35053545                        }
    35063546                        buf.append("</td></tr>");
     
    35143554            }
    35153555
    3516             // new rating / comment form
    3517             buf.append("<tr id=\"newRating\"><td>");
    3518             if (er) {
    3519                 buf.append("<select name=\"myRating\">");
    3520                 for (int i = 5; i >= 0; i--) {
    3521                     buf.append("<option value=\"").append(i).append("\" ");
    3522                     if (i == myRating)
    3523                         buf.append("selected=\"selected\"");
    3524                     buf.append('>');
    3525                     if (i != 0) {
    3526                         buf.append("★ ").append(ngettext("{0} star", "{0} stars", i));
    3527                     } else {
    3528                         buf.append("☆ ").append(_t("No rating"));
    3529                     }
    3530                     buf.append("</option>\n");
    3531                 }
    3532                 buf.append("</select></td>");
    3533             }
    3534             if (esc) {
    3535                 buf.append("<td id=\"addCommentText\"><textarea name=\"nofilter_newComment\" cols=\"44\" rows=\"4\"></textarea></td>");
    3536             } else {
    3537                 buf.append("<td></td>");
    3538             }
    3539             buf.append("<td class=\"commentAction\"><input type=\"submit\" name=\"addComment\" value=\"");
    3540             if (er && esc)
    3541                 buf.append(_t("Rate and Comment"));
    3542             else if (er)
    3543                 buf.append(_t("Rate Torrent"));
    3544             else
    3545                 buf.append(_t("Add Comment"));
    3546             buf.append("\" class=\"accept\">\n");
    3547             buf.append("</td></tr></table>");
     3556            buf.append("</table>");
    35483557            // TODO  disable / enable comments for this torrent
    35493558            // existing ratings / comments table
     
    35533562                fmt.setTimeZone(SystemVersion.getSystemTimeZone(_context));
    35543563                buf.append("<table class=\"snarkComments\">");
    3555 
    3556                 // TODO Make .commentText and .commentDelete columns display only when comments are enabled
    3557                 // buf.append("<tr><th class=\"commentAuthor\">");
    3558                 // buf.append(_t("Author"));
    3559                 // buf.append("</th><th class=\"commentRating\">");
    3560                 // buf.append(_t("Rating"));
    3561                 // buf.append("</th><th class=\"commentDate\">");
    3562                 // buf.append(_t("Date"));
    3563                 // buf.append("</th><th class=\"commentText\">");
    3564                 // buf.append(_t("Comment"));
    3565                 // buf.append("</th><th class=\"commentDelete\" title=\"");
    3566                 // buf.append(_t("Mark for deletion"));
    3567                 // buf.append("\"></th></tr>");
    35683564
    35693565                while (iter.hasNext()) {
     
    36003596                        }
    36013597                    } else {
    3602                         buf.append("</td><td class=\"commentDelete\">"); // insert empty named columns to maintain table layout
     3598                        buf.append("</td><td class=\"commentDelete\">"); // insert empty named columns to maintain table layout .. fails to catch uncommented row when comments also shown
    36033599                    }
    36043600                    buf.append("</td></tr>\n");
     
    36143610                //buf.append(_t("No comments for this torrent"));
    36153611            } // iter != null
     3612            buf.append("</div>");
    36163613    }
    36173614
  • history.txt

    ra9bf1e29 r4da95af  
    1616   - Update overview text
    1717   - added tabindex="0" to destination addresses, highlighted on :focus
     18 * i2psnark:
     19   - Reorder .snarkCommentInfo sections so my rating / average rating is located
     20     directly above posted comments/ratings in .snarkComments
     21   - If author name for comments is configured, display it in .snarkCommentInfo
     22     table header
     23   - Full status tooltips for status icons in .snarkTorrents
     24   - Rework td/th classes for .snarkTorrents so each column (both th + td) now
     25     belongs to a given class
     26   - Stop .snarkTorrentStatus class being incorrectly applied to .peerinfo
     27     columns
     28   - Spans for DHT peers / Dest in #totals, .snarkTorrentInfo info hash
     29   - Delete icon for delete comments td
     30   - Overhaul .snarkTorrents column widths
     31   - CSS tidyups
    1832
    19332017-05-25 zzz
  • installer/resources/themes/snark/classic/snark.css

    ra9bf1e29 r4da95af  
    320320}
    321321
    322 .snarkTorrents th:nth-child(4),
    323 .snarkTorrents th:nth-child(5),
    324 .snarkTorrents th:nth-child(6),
    325 .snarkTorrents th:nth-child(7),
    326 .snarkTorrents th:nth-child(8),
    327 .snarkTorrents th:nth-child(9),
    328 .snarkTorrents th:last-child {
     322#pagenav, .snarkTorrentETA, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp, .snarkTorrentAction {
    329323     text-align: center;
    330324}
    331325
    332 .snarkTorrents td:nth-child(6),
    333 .snarkTorrents td:nth-child(7),
    334 .snarkTorrents td:nth-child(8) {
    335      text-align: center !important;
    336 }
    337 
    338 table.snarkTorrents {
     326.snarkTorrentAction {
     327     padding-right: 2px !important;
     328}
     329
     330.snarkTorrents {
    339331     margin-top: -1px !important;
    340332}
    341333
    342 .snarkTorrents td:nth-child(1) {
    343      width: 24px !important;
    344 }
    345 
    346 .snarkTorrents td:nth-child(3),
    347 .snarkTorrents td:nth-child(4) {
     334.snarkTrackerDetails, .snarkTorrentDetails {
    348335     width: 16px !important;
    349336     text-align: center !important;
    350337     font-weight: bold;
     338}
     339
     340.snarkGraphicStatus, .snarkTorrentStatus {
     341     white-space: nowrap;
     342     width: 1%;
     343}
     344
     345.snarkGraphicStatus {
     346     width: 24px !important;
     347}
     348
     349
     350.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     351     width: 5%;
     352     min-width: 40px;
     353     white-space: nowrap;
     354}
     355
     356.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrents th:last-child:empty, .snarkTorrents td:last-child:empty {
     357     width: 0 !important;
    351358}
    352359
     
    523530}
    524531
    525 table.snarkTorrents {
     532.snarkTorrents {
    526533     margin-top: -1px !important;
    527534     border: none;
     
    606613.snarkTorrentInfo td:first-child {
    607614     width: 20px !important;
    608      padding: 3px 4px 4px!important;
     615     padding: 4px !important;
    609616}
    610617
     
    628635}
    629636
    630 table.SnarkTorrentInfo {
     637.SnarkTorrentInfo {
    631638     margin-bottom: 1px !important;
    632639     border-bottom: 1px solid #89f;
     
    654661}
    655662
     663#infohash {
     664     color: #090;
     665     -moz-user-select: all;
     666     -webkit-user-select: all;
     667     user-select: all;
     668}
     669
    656670/* end torrent info */
    657671
    658672/* torrent directory */
    659673
    660 table.SnarkDirInfo {
     674.SnarkDirInfo {
    661675     margin-top: 10px !important;
    662676     margin-bottom: 0;
     
    722736}
    723737
    724 table.SnarkDirInfo img {
     738.SnarkDirInfo img {
    725739     max-width: 16px;
    726740     max-height: 16px;
     
    827841
    828842.snarkTorrentAction {
    829      margin: 0 !important;
    830      padding: 1px 1px 1px 1px !important;
     843     width: 1%;
     844     white-space: nowrap;
     845     padding: 1px 2px 1px 1px !important;
    831846     text-align: center !important;
    832847}
     
    841856}
    842857
    843 .snarkTorrentAction input[type="image"],
    844 .snarkTorrents th:last-child input[type="image"] {
     858.snarkTorrentAction input[type="image"] {
    845859     padding: 3px !important;
    846860     background: #339;
     
    853867}
    854868
    855 .snarkTorrentAction input[type="image"]:hover,
    856 .snarkTorrentAction input[type="image"]:focus,
    857 .snarkTorrents th:last-child input[type="image"]:hover,
    858 .snarkTorrents th:last-child input[type="image"]:focus {
    859      border: 1px solid #f60;
     869.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
     870     border: 1px solid #f60 !important;
    860871     filter: drop-shadow(0 0 1px #f60);
    861872}
    862873
    863 .snarkTorrentAction input[type="image"]:active,
    864 .snarkTorrents th:last-child input[type="image"]:active {
     874.snarkTorrentAction input[type="image"]:active {
    865875     background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%);
    866876     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333;
    867877     filter: none !important;
    868 }
    869 
    870 .snarkTorrents th:last-child input[type="image"]:hover,
    871 .snarkTorrents td:last-child input[type="image"]:hover,
    872 .snarkTorrents th:last-child input[type="image"]:focus,
    873 .snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */
    874      border: 1px solid #f60 !important;
    875 }
    876 
    877 td.snarkTorrentAction {
    878      width: 1%;
    879      padding-right: 2px !important;
    880      white-space: nowrap;
    881878}
    882879
     
    14951492}
    14961493
     1494select, input.r {
     1495     min-width: 120px;
     1496}
     1497
     1498input[name="nofilter_commentsName"] {
     1499     width: 250px;
     1500}
     1501
    14971502select {
    14981503     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
    1499      min-width: 100px;
    15001504     margin: 2px 4px 2px 0;
    15011505     padding: 4px 16px 4px 2px;
     
    17381742}
    17391743
    1740 table.trackerconfig td:first-child {
     1744.trackerconfig td:first-child {
    17411745     width: 24px !important;
    17421746     padding: 5px 2px;
     
    22732277     display: inline-block;
    22742278     margin-right: 7px;
     2279     vertical-align: middle;
    22752280}
    22762281
     
    22862291}
    22872292
    2288 
    22892293/* end Resource Errors */
    22902294
    2291 /* MS Edge fix */
    2292 _:-ms-lang(x), * {
    2293      filter: none !important;
    2294 }
    2295 
    2296 /* responsive layout */
    2297 
    2298 @media screen and (max-width: 950px) {
    2299 
    2300 body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo {
    2301      font-size: 8pt;
    2302 }
    2303 
    2304 .snarkTorrents a {
    2305      display: inline-block;
    2306      white-space: nowrap;
    2307      overflow: hidden;
    2308      text-overflow: ellipsis;
    2309      max-width: 300px;
    2310 }
    2311 
    2312 .snarkTorrents td:nth-child(2) {
    2313      white-space: nowrap;
    2314 }
    2315 .snarkTorrents td[colspan="10"] {
    2316      white-space: normal;
    2317 }
    2318 
    2319 .snarkTorrentStatus b {
    2320      display: none;
    2321 }
    2322 
    2323 b.alwaysShow {
    2324      display: inline;
    2325 }
    2326 
    2327 .snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
    2328      font-weight: bold;
    2329 }
    2330 
    2331 .snarkTorrents .debuginfo td, .snarkTorrents .peerinfo td {
    2332      font-weight: normal;
    2333 }
    2334 
    2335 td#bwHelp {
    2336      background: url(images/infocircle.png) left 10px center no-repeat;
    2337      background-size: 14px auto !important;
    2338 }
    2339 
    2340 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
    2341      height: 9px;
    2342 }
    2343 }
    2344 
    2345 @media screen and (max-width: 1100px) {
    2346 .toggleview, .snarkConfigTitle {
    2347      font-size: 11pt !important;
    2348 }
    2349 
    2350 .snarkDirInfo th a img, .snarkDirInfo th img  {
    2351      max-height: 18px !important;
    2352 }
    2353 
    2354 body {
    2355      margin: 3px;
    2356 }
    2357 
    2358 .page {
    2359      padding: 4px;
    2360 }
    2361 
    2362 .logshim {
    2363      margin-top: -5px !important;
    2364 }
    2365 
    2366 .snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
    2367      background-size: 14px 14px, 100% 100% !important;
    2368 }
    2369 
    2370 .snarkRefresh:link:first-child {
    2371      padding-left: 22px !important;
    2372 }
    2373 
    2374 .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
    2375      margin-top: 4px !important;
    2376      margin-bottom: 4px !important;
    2377 }
    2378 
    2379 .configsection, .configsectionpanel:last-child {
    2380      margin-bottom: 0 !important;
    2381 }
    2382 
    2383 table.SnarkDirInfo {
    2384      margin-top: 4px !important;
    2385 }
    2386 
    2387 .dirInfoComplete {
    2388      display: none;
    2389 }
    2390 
    2391 .percentBarText, .percentBarOuter {
    2392      width: 100px;
    2393      line-height: 15px;
    2394 }
    2395 
    2396 .snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
    2397      width: 60px;
    2398 }
    2399 
    2400 #dhtDebugInner {
    2401      margin-top: -24px !important;
    2402 }
    2403 }
    2404 
    2405 @media screen and (max-width: 1200px) {
    2406 .trackerconfig th {
    2407      padding-top: 5px;
    2408      padding-bottom: 5px;
    2409 }
    2410 
    2411 #configs td:first-child::before {
    2412      content: "";
    2413      min-height: 30px;
    2414 }
    2415 
    2416 .percentBarText {
    2417      line-height: 16px;
    2418 }
    2419 
    2420 .snarkTorrents tfoot tr:first-child {
    2421      line-height: 100%;
    2422 }
    2423 }
    2424 
    2425 @media screen and (max-width: 1400px) {
    2426 
    2427 .percentBarText {
    2428      line-height: 15px;
    2429 }
    2430 }
    2431 
    2432 @media screen and (min-width: 1100px) {
    2433 body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkMessages li {
    2434      font-size: 9pt !important;
    2435 }
    2436 
    2437 .snarkRefresh {
    2438      font-size: 11pt !important;
    2439 }
    2440 
    2441 .snarkRefresh:link {
    2442      padding-left: 25px !important;
    2443 }
    2444 
    2445 .percentDownloaded {
    2446      pointer-events: none; /* hide tooltip */
    2447 }
    2448 }
    2449 
    2450 @media screen and (min-width: 1400px) {
    2451 body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code {
    2452      font-size: 10pt !important;
    2453 }
    2454 
    2455 .snarkMessages li, .snarkTorrents tt {
    2456      font-size: 9pt;
    2457 }
    2458 
    2459 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
    2460      padding: 4px !important;
    2461      box-shadow: inset 0 0 0 1px #fff;
    2462 }
    2463 
    2464 td.snarkTorrentDownloaded {
    2465      white-space: nowrap;
    2466 }
    2467 
    2468 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
    2469      min-width: 240px;
    2470 }
    2471 
    2472 .snarkTorrentStatus b {
    2473      margin-right: 3px;
    2474 }
    2475 
    2476 #configs td:first-child {
    2477      min-width: 220px !important;
    2478 }
    2479 }
    2480 /* end responsive layout */
    2481 
    24822295/* Comments Section */
    2483 /* TODO: merge with other rules where applicable */
    24842296
    24852297.snarkCommentInfo, .snarkComments {
     
    24912303}
    24922304
     2305.snarkComments {
     2306     margin-top: -1px !important;
     2307}
     2308
    24932309.snarkCommentInfo th, .snarkComments th {
    24942310     padding: 8px 5px;
     
    25002316}
    25012317
    2502 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
     2318.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
    25032319     border-top: 1px solid #bbf;
    25042320     background: rgba(240, 240, 255, 0.5) #fff;
    25052321}
    25062322
    2507 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
     2323.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
    25082324     border-top: 1px solid #bbf;
    25092325     background: rgba(220, 220, 255, 0.5);
     
    25312347}
    25322348
    2533 .snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
     2349.snarkCommentInfo textarea {
    25342350     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif !important;
    25352351     font-weight: normal;
     
    25762392     white-space: normal;
    25772393     text-align: justify;
    2578      width: 80%;
     2394     width: 90%;
    25792395}
    25802396
     
    25862402
    25872403.snarkCommentInfo td:first-child, .commentAuthor {
    2588      width: 180px !important;
     2404     width: 160px !important;
     2405     min-width: 160px !important;
    25892406     padding-right: 2px;
    25902407}
     
    26262443
    26272444#commentDeleteAction td {
    2628      padding: 0 6px;
     2445     padding: 8px 6px;
    26292446     border-top: 1px solid #89f;
    26302447     border-bottom: 1px solid #89f;
     
    26342451     width: 1%;
    26352452     white-space: nowrap;
    2636      min-width: 180px !important;
    26372453     padding-left: 0;
    26382454}
     
    26432459
    26442460.commentAction input[type="submit"] {
    2645      margin-top: 10px;
    2646      margin-bottom: 10px;
     2461     margin-top: 3px;
     2462     margin-bottom: 3px;
    26472463}
    26482464
    26492465.commentDelete {
     2466     background: url(../ubergine/images/nuke.png) 2px center no-repeat;
    26502467     text-align: left;
     2468     padding-left: 24px !important;
     2469}
     2470
     2471#newRating td:first-child {
     2472     text-align: right;
     2473}
     2474
     2475#newRating select {
     2476     width: 90%;
    26512477}
    26522478
     
    26712497
    26722498/* end Comments section */
     2499
     2500/* MS Edge fix */
     2501_:-ms-lang(x), * {
     2502     filter: none !important;
     2503}
     2504
     2505/* responsive layout */
     2506
     2507@media screen and (max-width: 950px) {
     2508
     2509body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo {
     2510     font-size: 8pt;
     2511}
     2512
     2513.snarkTorrents a {
     2514     display: inline-block;
     2515     white-space: nowrap;
     2516     overflow: hidden;
     2517     text-overflow: ellipsis;
     2518     max-width: 300px;
     2519}
     2520
     2521.snarkTorrents td:nth-child(2) {
     2522     white-space: nowrap;
     2523}
     2524.snarkTorrents td[colspan="10"] {
     2525     white-space: normal;
     2526}
     2527
     2528.snarkTorrentStatus b {
     2529     display: none;
     2530}
     2531
     2532b.alwaysShow {
     2533     display: inline;
     2534}
     2535
     2536.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
     2537     font-weight: bold;
     2538}
     2539
     2540.snarkTorrents .debuginfo td, .snarkTorrents .peerinfo td {
     2541     font-weight: normal;
     2542}
     2543
     2544td#bwHelp {
     2545     background: url(images/infocircle.png) left 10px center no-repeat;
     2546     background-size: 14px auto !important;
     2547}
     2548
     2549.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
     2550     height: 9px;
     2551}
     2552}
     2553
     2554@media screen and (max-width: 1100px) {
     2555.toggleview, .snarkConfigTitle {
     2556     font-size: 11pt !important;
     2557}
     2558
     2559.snarkDirInfo th a img, .snarkDirInfo th img  {
     2560     max-height: 18px !important;
     2561}
     2562
     2563body {
     2564     margin: 3px;
     2565}
     2566
     2567.page {
     2568     padding: 4px;
     2569}
     2570
     2571.logshim {
     2572     margin-top: -5px !important;
     2573}
     2574
     2575.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
     2576     background-size: 14px 14px, 100% 100% !important;
     2577}
     2578
     2579.snarkRefresh:link:first-child {
     2580     padding-left: 22px !important;
     2581}
     2582
     2583.addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
     2584     margin-top: 4px !important;
     2585     margin-bottom: 4px !important;
     2586}
     2587
     2588.configsection, .configsectionpanel:last-child {
     2589     margin-bottom: 0 !important;
     2590}
     2591
     2592.SnarkDirInfo {
     2593     margin-top: 4px !important;
     2594}
     2595
     2596.dirInfoComplete {
     2597     display: none;
     2598}
     2599
     2600.percentBarText, .percentBarOuter {
     2601     width: 100px;
     2602     line-height: 15px;
     2603}
     2604
     2605.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
     2606     width: 60px;
     2607}
     2608
     2609#dhtDebugInner {
     2610     margin-top: -24px !important;
     2611}
     2612}
     2613
     2614@media screen and (max-width: 1200px) {
     2615.trackerconfig th {
     2616     padding-top: 5px;
     2617     padding-bottom: 5px;
     2618}
     2619
     2620#configs td:first-child::before {
     2621     content: "";
     2622     min-height: 30px;
     2623}
     2624
     2625.percentBarText {
     2626     line-height: 16px;
     2627}
     2628
     2629.snarkTorrents tfoot tr:first-child {
     2630     line-height: 100%;
     2631}
     2632}
     2633
     2634@media screen and (max-width: 1400px) {
     2635
     2636.percentBarText {
     2637     line-height: 15px;
     2638}
     2639}
     2640
     2641@media screen and (min-width: 1100px) {
     2642body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkMessages li {
     2643     font-size: 9pt !important;
     2644}
     2645
     2646.snarkRefresh {
     2647     font-size: 11pt !important;
     2648}
     2649
     2650.snarkRefresh:link {
     2651     padding-left: 25px !important;
     2652}
     2653
     2654.percentDownloaded {
     2655     pointer-events: none; /* hide tooltip */
     2656}
     2657}
     2658
     2659@media screen and (min-width: 1400px) {
     2660body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkCommentInfo textarea {
     2661     font-size: 10pt !important;
     2662}
     2663
     2664.snarkMessages li, .snarkTorrents tt {
     2665     font-size: 9pt;
     2666}
     2667
     2668.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
     2669     padding: 4px !important;
     2670     box-shadow: inset 0 0 0 1px #fff;
     2671}
     2672
     2673td.snarkTorrentDownloaded {
     2674     white-space: nowrap;
     2675}
     2676
     2677.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
     2678     min-width: 240px;
     2679}
     2680
     2681.snarkTorrentStatus b {
     2682     margin-right: 3px;
     2683}
     2684
     2685#configs td:first-child {
     2686     min-width: 220px !important;
     2687}
     2688}
     2689/* end responsive layout */
     2690
  • installer/resources/themes/snark/dark/snark.css

    ra9bf1e29 r4da95af  
    315315}
    316316
    317 tr {
    318      opacity: 1;
    319 }
    320 
    321317thead, tfoot {
    322318     background: #000;
     
    446442}
    447443
    448 .SnarkTorrents td:nth-child(6), .SnarkTorrents td:nth-child(7), .SnarkTorrents td:nth-child(8) {
     444.snarkTorrentETA, .snarkTorrentDownloaded, .snarkTorrentUploaded {
    449445     text-align: center !important;
    450446}
    451447
    452 table.SnarkTorrents {
     448.SnarkTorrents {
    453449     margin-top: -1px !important;
    454 }
    455 
    456 .snarkTorrents th {
    457      text-align: left;
    458450}
    459451
     
    464456}
    465457
    466 .snarkTorrents td:nth-child(1) {
     458.snarkGraphicStatus {
    467459     width: 24px !important;
    468460}
    469461
    470 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
     462.snarkTrackerDetails, .SnarkTorrentDetails {
    471463     width: 16px !important;
    472464     padding: 0 !important;
     
    474466}
    475467
    476 .snarkTorrents td:nth-child(3) {
     468.snarkTrackerDetails {
    477469     text-align: right !important;
     470}
     471
     472.snarkGraphicStatus, .snarkTorrentStatus {
     473     white-space: nowrap;
     474     width: 1%;
     475}
     476
     477th.snarkTorrentStatus {
     478     text-align: center !important;
     479}
     480
     481.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     482     width: 5%;
     483     min-width: 40px;
     484     white-space: nowrap;
     485}
     486
     487.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrents th:last-child:empty, .snarkTorrents td:last-child:empty {
     488     width: 0 !important;
    478489}
    479490
     
    547558}
    548559
    549 table.SnarkTorrentInfo {
     560.SnarkTorrentInfo {
    550561     margin-bottom: 1px !important;
    551562     background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100;
     
    564575}
    565576
    566 table.SnarkDirInfo {
     577.SnarkDirInfo {
    567578     margin-top: 10px !important;
    568579     margin-bottom: 0;
    569580     border-bottom: 1px solid #494;
     581}
     582
     583#infohash {
     584     color: #cc0;
     585     -moz-user-select: all;
     586     -webkit-user-select: all;
     587     user-select: all;
    570588}
    571589
     
    688706}
    689707
    690 td.snarkFileIcon {
     708.snarkFileIcon {
    691709     width: 16px;
    692710     padding: 0;
    693711}
    694712
    695 td.snarkFileStatusIcon {
     713.snarkFileStatusIcon {
    696714     width: 24px;
    697715     padding: 0 4px 0 0;
     
    713731td:first-child {
    714732     text-align: right;
    715      font-size: 9pt;
    716 }
    717 
    718 .center {
    719      text-align: center !important;
    720733}
    721734
     
    757770}
    758771
     772.snarkGraphicStatus {
     773     text-align: center !important;
     774}
     775
    759776.snarkTorrentStatus {
    760      padding: 2px 2px 2px 0;
     777     padding: 3px 5px 3px 0 !important;
    761778     line-height: 90%;
    762779     min-width: 0;
    763 }
    764 
    765 td.snarkTorrentStatus {
    766      text-align: center !important;
    767      padding: 3px 0;
    768 }
    769 
    770 td.snarkTorrentStatus:nth-child(2) {
    771780     text-align: left !important;
    772781}
     
    13461355}
    13471356
     1357input[name="nofilter_commentsName"] {
     1358     width: 250px;
     1359     text-overflow: ellipsis;
     1360}
     1361
     1362input[name="nofilter_commentsName"]:focus::placeholder {
     1363     opacity: 0;
     1364}
     1365
    13481366.configsectionpanel input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"], #configs select {
    13491367     margin-top: 4px;
     
    13601378}
    13611379
    1362 input[type=text], input.r {
    1363      min-width: 100px;
     1380input[type=text], input.r, select {
     1381     min-width: 120px !important;
    13641382}
    13651383
     
    16871705}
    16881706
    1689 table.trackerconfig td:first-child {
     1707.trackerconfig td:first-child {
    16901708     padding: 5px 2px;
    16911709     width: 24px !important;
     
    23612379/* end custom radios/checkboxes */
    23622380
    2363 /* responsive layout */
    2364 
    2365 @media screen and (max-width: 950px) {
    2366 .snarkTorrents td:nth-child(2) {
    2367      white-space: nowrap;
    2368 }
    2369 .snarkTorrents td[colspan="10"] {
    2370      white-space: normal;
    2371 }
    2372 
    2373 .snarkTorrentStatus b {
    2374      display: none;
    2375 }
    2376 
    2377 b.alwaysShow {
    2378      display: inline;
    2379 }
    2380 
    2381 .snarkTorrentStatus, .snarkTorrentStatus a {
    2382      font-weight: bold !important;
    2383 }
    2384 
    2385 .snarkTorrents td:first-child img {
    2386      height: 16px;
    2387      width: auto;
    2388 }
    2389 }
    2390 
    2391 @media screen and (max-width: 1100px) {
    2392 #configs td:first-child {
    2393      min-width: 200px !important;
    2394 }
    2395 
    2396 .snarkFileStatus {
    2397      width: 110px;
    2398 }
    2399 
    2400 .snarkFileStatus img[src*="clock"] {
    2401      margin-top: 6px;
    2402 }
    2403 
    2404 .snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
    2405      width: 60px;
    2406      padding: 0;
    2407 }
    2408 }
    2409 
    2410 @media screen and (max-width: 1200px) {
    2411 .snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
    2412      font-size: 11pt !important;
    2413 }
    2414 
    2415 .dirInfoComplete {
    2416      display: none;
    2417 }
    2418 
    2419 #configs td:first-child::after {
    2420    min-height: 24px;
    2421 }
    2422 
    2423 td#bwHelp a {
    2424      margin-left: 2px;
    2425 }
    2426 
    2427 .knownTracker a, #trackerselect a {
    2428      display: inline-block;
    2429      max-width: 210px;
    2430      white-space: nowrap;
    2431      overflow: hidden;
    2432      text-overflow: ellipsis;
    2433 }
    2434 
    2435 #trackerselect a {
    2436      max-width: 300px;
    2437 }
    2438 
    2439 .percentBarOuter {
    2440      margin: 2px auto !important;
    2441 }
    2442 
    2443 .percentBarText {
    2444      line-height: 130%;
    2445 }
    2446 
    2447 .percentBarText, .percentBarOuter, .snarkTorrentDownloaded {
    2448      width: 100px;
    2449 }
    2450 
    2451 .snarkFileStatus img[src*="clock"] {
    2452      margin-top: 4px;
    2453 }
    2454 }
    2455 
    2456 @media screen and (min-width: 1100px) {
    2457 body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
    2458      font-size: 9pt !important;
    2459 }
    2460 
    2461 .snarkTorrents td {
    2462      padding-top: 3px !important;
    2463      padding-bottom: 3px !important;
    2464 }
    2465 
    2466 .snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td {
    2467      padding-top: 4px !important;
    2468      padding-bottom: 4px !important;
    2469 }
    2470 
    2471 #configs td:first-child {
    2472      min-width: 220px !important;
    2473 }
    2474 
    2475 .snarkTorrentStatus b {
    2476     margin-right: 3px;
    2477 }
    2478 }
    2479 
    2480 @media screen and (min-width: 1200px) {
    2481 .snarkRefresh:link {
    2482      font-size: 11pt !important;
    2483 }
    2484 
    2485 .snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
    2486 .snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
    2487 .snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
    2488      background-size: 16px auto, 100% 100% !important;
    2489      padding-left: 24px !important;
    2490 }
    2491 
    2492 .snarkRefresh:link:first-child {
    2493      padding-left: 25px !important;
    2494 }
    2495 
    2496 .snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
    2497      font-size: 12pt !important;
    2498 }
    2499 
    2500 .snarkTorrentDownloaded {
    2501      white-space: nowrap;
    2502      padding: 0 8px;
    2503      width: 110px;
    2504      text-align: center;
    2505 }
    2506 
    2507 .percentDownloaded {
    2508      pointer-events: none; /* hide tooltip */
    2509 }
    2510 
    2511 #configs td:first-child::after {
    2512    min-height: 26px;
    2513 }
    2514 
    2515 #configs a {
    2516      display: inline-block;
    2517      white-space: nowrap;
    2518      margin-left: 4px;
    2519 }
    2520 
    2521 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
    2522      font-size: 11pt !important;
    2523 }
    2524 }
    2525 
    2526 @media screen and (min-width: 1400px) {
    2527 body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
    2528      font-size: 10pt !important;
    2529 }
    2530 
    2531 .snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
    2532      font-size: 12pt !important;
    2533 }
    2534 
    2535 .snarkConfigTitle, label.toggleview {
    2536      min-width: 240px !important;
    2537      padding-top: 4px;
    2538 }
    2539 
    2540 tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
    2541      font-size: 9pt !important;
    2542 }
    2543 
    2544 textarea[name="i2cpOpts"] {
    2545      height: 26px;
    2546      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
    2547      font-weight: bold;
    2548 }
    2549 
    2550 .snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
    2551      height: 11px;
    2552 }
    2553 
    2554 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
    2555      width: 18px !important;
    2556 }
    2557 
    2558 .snarkTorrents .snarkTorrentName {
    2559      padding-left: 5px;
    2560 }
    2561 
    2562 .debugConnection {
    2563      line-height: 150%;
    2564 }
    2565 
    2566 .page {
    2567      padding: 10px;
    2568      border: 1px solid #494;
    2569      background: #001900;
    2570      background: linear-gradient(to bottom, #001900, #010);
    2571      box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
    2572 }
    2573 
    2574 #configs td:first-child::after {
    2575    min-height: 28px;
    2576 }
    2577 
    2578 .snarkTorrentStatus b {
    2579     margin-right: 4px;
    2580 }
    2581 
    2582 .snarkMessages {
    2583      margin: -11px -11px 0;
    2584 }
    2585 
    2586 .iframed .snarkMessages {
    2587      margin: 0;
    2588      position: static;
    2589 }
    2590 
    2591 .addtorrentsection {
    2592      margin-top: 10px;
    2593 }
    2594 
    2595 .configsection {
    2596      margin-bottom: -11px;
    2597 }
    2598 
    2599 .addtorrentsection, .newtorrentsection, .configsection {
    2600      margin-left: -11px;
    2601      margin-right: -11px;
    2602 }
    2603 
    2604 .iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection {
    2605      margin-left: 0;
    2606      margin-right: 0;
    2607 }
    2608 }
    2609 
    2610 /* end responsive layout */
    2611 
    26122381/* Comments Section */
    26132382/* TODO: merge with other rules where applicable */
     
    26222391}
    26232392
     2393.snarkComments {
     2394     margin-top: -1px !important;
     2395     border-top: none;
     2396}
     2397
    26242398.snarkCommentInfo th, .snarkComments th {
    26252399     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%);
     
    26282402}
    26292403
    2630 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
     2404.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
    26312405     background: #001000;
    26322406     border-bottom: 1px inset #000;
    26332407}
    26342408
    2635 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
     2409.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
    26362410     background: #000800;
    26372411     border-bottom: 1px inset #000;
     
    26582432     content: "";
    26592433     display: inline-block;
    2660      min-height: 32px;
     2434     min-height: 22px;
    26612435     vertical-align: middle;
    26622436}
     
    26652439     float: right;
    26662440     margin-right: 5px !important;
     2441}
     2442
     2443#myRating {
     2444     border-top: 1px solid #050;
    26672445}
    26682446
     
    26902468
    26912469.commentRating {
    2692      padding-right: 10px !important;
     2470     width: 80px;
     2471     white-space: nowrap;
    26932472}
    26942473
     
    27012480
    27022481.commentDate {
    2703      width: 100px;
     2482     width: 105px;
    27042483     background: url(images/clock.png) left center no-repeat;
    27052484     padding-left: 20px !important;
     
    27072486
    27082487.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     2488     min-width: 160px !important;
    27092489     width: 160px !important;
    27102490     padding-right: 2px;
     
    27402520}
    27412521
    2742 .commentText .optbox {
    2743      position: fixed;
    2744      right: 20px;
    2745      top: 10px;
    2746 }
    2747 
    27482522#commentsConfig .optbox {
    27492523     vertical-align: middle !important;
     
    27552529
    27562530#commentDeleteAction {
    2757      border-top: 1px solid #494;
     2531     border-top: 1px solid #050;
    27582532     background: none;;
    27592533}
     
    27662540     width: 1%;
    27672541     white-space: nowrap;
    2768 /*     min-width: 180px !important;*/
    27692542     padding-left: 0;
    27702543}
     
    27742547}
    27752548
    2776 .commentAction input[type="submit"] {
    2777      margin-top: 10px;
    2778      margin-bottom: 10px;
    2779 }
    2780 
    27812549.commentDelete {
     2550     background: url(../ubergine/images/nuke.png) 2px center no-repeat;
    27822551     text-align: left;
     2552     padding: 8px 6px 8px 24px !important;
    27832553}
    27842554
     
    27862556     padding-top: 10px !important;
    27872557     padding-bottom: 10px !important;
     2558     border-top: 1px solid #050;
    27882559}
    27892560
     
    28082579
    28092580/* end Comments section */
     2581
     2582/* responsive layout */
     2583
     2584@media screen and (max-width: 950px) {
     2585.snarkTorrents td:nth-child(2) {
     2586     white-space: nowrap;
     2587}
     2588.snarkTorrents td[colspan="10"] {
     2589     white-space: normal;
     2590}
     2591
     2592.snarkTorrentStatus b {
     2593     display: none;
     2594}
     2595
     2596b.alwaysShow {
     2597     display: inline;
     2598}
     2599
     2600.snarkTorrentStatus, .snarkTorrentStatus a {
     2601     font-weight: bold !important;
     2602}
     2603
     2604.snarkTorrents td:first-child img {
     2605     height: 16px;
     2606     width: auto;
     2607}
     2608}
     2609
     2610@media screen and (max-width: 1100px) {
     2611#configs td:first-child {
     2612     min-width: 200px !important;
     2613}
     2614
     2615.snarkFileStatus {
     2616     width: 110px;
     2617}
     2618
     2619.snarkFileStatus img[src*="clock"] {
     2620     margin-top: 6px;
     2621}
     2622
     2623.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter {
     2624     width: 60px;
     2625     padding: 0;
     2626}
     2627}
     2628
     2629@media screen and (max-width: 1200px) {
     2630.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
     2631     font-size: 11pt !important;
     2632}
     2633
     2634.dirInfoComplete {
     2635     display: none;
     2636}
     2637
     2638#configs td:first-child::after {
     2639   min-height: 24px;
     2640}
     2641
     2642td#bwHelp a {
     2643     margin-left: 2px;
     2644}
     2645
     2646.knownTracker a, #trackerselect a {
     2647     display: inline-block;
     2648     max-width: 210px;
     2649     white-space: nowrap;
     2650     overflow: hidden;
     2651     text-overflow: ellipsis;
     2652}
     2653
     2654#trackerselect a {
     2655     max-width: 300px;
     2656}
     2657
     2658.percentBarOuter {
     2659     margin: 2px auto !important;
     2660}
     2661
     2662.percentBarText {
     2663     line-height: 130%;
     2664}
     2665
     2666.percentBarText, .percentBarOuter, .snarkTorrentDownloaded {
     2667     width: 100px;
     2668}
     2669
     2670.snarkFileStatus img[src*="clock"] {
     2671     margin-top: 4px;
     2672}
     2673}
     2674
     2675@media screen and (min-width: 1100px) {
     2676body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
     2677     font-size: 9pt !important;
     2678}
     2679
     2680.snarkTorrents td {
     2681     padding-top: 3px !important;
     2682     padding-bottom: 3px !important;
     2683}
     2684
     2685.snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td {
     2686     padding-top: 4px !important;
     2687     padding-bottom: 4px !important;
     2688}
     2689
     2690#configs td:first-child {
     2691     min-width: 220px !important;
     2692}
     2693
     2694.snarkTorrentStatus b {
     2695    margin-right: 3px;
     2696}
     2697}
     2698
     2699@media screen and (min-width: 1200px) {
     2700.snarkRefresh:link {
     2701     font-size: 11pt !important;
     2702}
     2703
     2704.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
     2705.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
     2706.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
     2707     background-size: 16px auto, 100% 100% !important;
     2708     padding-left: 24px !important;
     2709}
     2710
     2711.snarkRefresh:link:first-child {
     2712     padding-left: 25px !important;
     2713}
     2714
     2715.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
     2716     font-size: 12pt !important;
     2717}
     2718
     2719.snarkTorrentStatus {
     2720     padding-right: 10px !important;
     2721}
     2722
     2723.snarkTorrentDownloaded {
     2724     white-space: nowrap;
     2725     padding: 0 8px;
     2726     width: 110px;
     2727     text-align: center;
     2728}
     2729
     2730.percentDownloaded {
     2731     pointer-events: none; /* hide tooltip */
     2732}
     2733
     2734#configs td:first-child::after {
     2735   min-height: 26px;
     2736}
     2737
     2738#configs a {
     2739     display: inline-block;
     2740     white-space: nowrap;
     2741     margin-left: 4px;
     2742}
     2743
     2744.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
     2745     font-size: 11pt !important;
     2746}
     2747}
     2748
     2749@media screen and (min-width: 1400px) {
     2750body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
     2751     font-size: 10pt !important;
     2752}
     2753
     2754.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
     2755     font-size: 12pt !important;
     2756}
     2757
     2758.snarkConfigTitle, label.toggleview {
     2759     min-width: 240px !important;
     2760     padding-top: 4px;
     2761}
     2762
     2763tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
     2764     font-size: 9pt !important;
     2765}
     2766
     2767textarea[name="i2cpOpts"] {
     2768     height: 26px;
     2769     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
     2770     font-weight: bold;
     2771}
     2772
     2773.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
     2774     height: 11px;
     2775}
     2776
     2777.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
     2778     width: 18px !important;
     2779}
     2780
     2781.snarkTorrents .snarkTorrentName {
     2782     padding-left: 5px;
     2783}
     2784
     2785.debugConnection {
     2786     line-height: 150%;
     2787}
     2788
     2789.page {
     2790     padding: 10px;
     2791     border: 1px solid #494;
     2792     background: #001900;
     2793     background: linear-gradient(to bottom, #001900, #010);
     2794     box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
     2795}
     2796
     2797#configs td:first-child::after {
     2798   min-height: 28px;
     2799}
     2800
     2801.snarkTorrentStatus b {
     2802    margin-right: 4px;
     2803}
     2804
     2805.snarkMessages {
     2806     margin: -11px -11px 0;
     2807}
     2808
     2809.iframed .snarkMessages {
     2810     margin: 0;
     2811     position: static;
     2812}
     2813
     2814.addtorrentsection {
     2815     margin-top: 10px;
     2816}
     2817
     2818.configsection {
     2819     margin-bottom: -11px;
     2820}
     2821
     2822.addtorrentsection, .newtorrentsection, .configsection {
     2823     margin-left: -11px;
     2824     margin-right: -11px;
     2825}
     2826
     2827.iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection {
     2828     margin-left: 0;
     2829     margin-right: 0;
     2830}
     2831}
     2832
     2833/* end responsive layout */
     2834
  • installer/resources/themes/snark/light/snark.css

    ra9bf1e29 r4da95af  
    146146
    147147.snarkRefresh:first-child {
    148 /*     padding: 4px 10px 4px 19px !important;*/
    149148     border-radius: 2px 0 0 2px;
    150149     background: #fff url(images/button_snark.png) 10px center no-repeat;
     
    309308}
    310309
    311 tr {
    312      opacity: 1;
    313 }
    314 
    315310thead, tfoot {
    316311     background: #fff;
     
    417412}
    418413
     414/* main torrents listing */
     415
     416.snarkTorrents thead th {
     417     padding-top: 4px;
     418     padding-bottom: 4px;
     419}
     420
    419421.snarkTorrents {
    420422     margin: -1px 0;
     
    434436}
    435437
     438.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrents th:last-child:empty, .snarkTorrents td:last-child:empty {
     439     width: 0 !important;
     440}
     441
     442.snarkTorrents tfoot tr:first-child th {
     443     padding: 5px 4px;
     444     background: #fff;
     445     background: linear-gradient(to bottom, #fff 50%, rgb(240, 240, 255)) #fff;
     446     vertical-align: middle;
     447     font-weight: bold;
     448     font-style: normal !important;
     449     color: #31334f !important;
     450}
     451
    436452.snarkTorrents td {
    437453     line-height: 110%;
    438 }
    439 
    440 .snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) {
    441      width: 20px !important;
    442 }
    443 
    444 .snarkTorrents td:nth-child(1) {
    445      text-align: left;
    446      padding: 2px;
    447 }
    448 
    449 .snarkTorrents td:nth-child(2) {
    450      white-space: nowrap;
    451 }
    452 
    453 .snarkTorrentStatus b {
    454      margin-right: 3px;
    455 }
    456 
    457 .snarkTorrents td[colspan="10"] {
    458      white-space: normal !important;
    459 }
    460 
    461 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
    462      width: 16px !important;
    463      padding: 2px 1px 2px 0;
    464 }
    465 
    466 .SnarkTorrents td:nth-child(4) {
    467      text-align: center;
    468454}
    469455
     
    473459}
    474460
    475 .snarkTorrents th[colspan="6"]::first-line {
    476      font-weight: bold;
    477 }
    478 
    479 .snarkTorrents th[colspan="6"] {
    480      font-weight: normal;
    481 }
    482 
    483 .snarkTorrents tfoot tr:first-child th {
    484      padding: 5px 4px !important;
    485      background: #fff;
    486      vertical-align: middle;
    487 }
    488 
    489 td {
    490      padding: 2px 4px;
    491      color: #272e3f !important;
    492      opacity: 1;
    493      font-size: 9pt;
    494 }
    495 
    496 .mainsection td {
    497      color: #272e3f;
    498 }
    499 
    500 td:first-child {
    501      text-align: right;
    502 }
    503 
    504 .center {
     461.snarkTorrents td[colspan="10"] {
     462     white-space: normal !important;
     463}
     464
     465.snarkGraphicStatus, .snarkTorrentStatus {
     466     white-space: nowrap;
     467     width: 1%;
     468}
     469
     470.snarkGraphicStatus {
     471     max-width: 32px !important;
    505472     text-align: center !important;
     473     padding-left: 2px;
     474}
     475
     476.snarkTorrentStatus {
     477     padding-right: 5px;
     478}
     479
     480th.snarkTorrentStatus {
     481     text-align: center !important;
     482}
     483
     484.snarkTorrentStatus b {
     485     margin-right: 3px;
     486}
     487
     488.snarkTorrentStatus a:visited {
     489     color: #559;
     490}
     491
     492.snarkTorrentStatus a:hover {
     493     color: #f60;
     494}
     495
     496.snarkTrackerDetails, .SnarkTorrentDetails {
     497     width: 16px !important;
     498     padding: 2px 1px 2px 0;
     499}
     500
     501.SnarkTorrentDetails {
     502     text-align: center;
    506503}
    507504
    508505.snarkTorrentName {
    509      padding: 0;
     506     padding: 0 0 0 3px;
    510507     line-height: 90%;
    511508}
     
    514511     display: inline-block;
    515512     width: 100%;
     513}
     514
     515.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     516     width: 5%;
     517     min-width: 40px;
     518     white-space: nowrap;
    516519}
    517520
     
    533536     box-shadow: 0 0 1px 1px #f90;
    534537     opacity: 1;
    535 }
    536 
    537 .snarkTorrents thead th:last-child br { /* kill "start all/stop all" button wrapping in the header */
    538      display: none;
    539538}
    540539
     
    562561}
    563562
    564 .snarkTorrentEven {
    565      font-size: 8pt;
    566      background: #eef;
    567      background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
    568 }
    569 
    570563.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover {
    571564     background: #fff !important;
     
    580573}
    581574
    582 .snarkTorrentStatus a:visited {
    583      color: #559;
    584 }
    585 
    586 .snarkTorrentStatus a:hover {
    587      color: #f60;
    588 }
    589 
    590 .snarkTorrentStatus:first-child {
    591      text-align: left !important;
    592      padding-left: 0;
    593      min-width: 48px;
    594      font-weight: bold;
    595      color: #dd9 !important;
    596      font-size: 8pt;
    597      padding: 1px !important;
    598 }
    599 
    600 .snarkTorrentStatus:first-child img {
    601      margin-right: 10px !important;
    602      margin-left: 6px;
    603 }
    604 
    605575.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
    606576     padding: 0 3px;
     
    608578}
    609579
     580.snarkTorrentRateUp:empty, .snarkTorrentRateDown:empty, .snarkTorrentAction:empty {
     581     width: 0;
     582     padding: 0;
     583}
     584
    610585.snarkTorrentUploaded, .snarkTorrentRateUp {
    611586     font-style: italic !important;
     
    613588}
    614589
    615 .snarkTorrentDownloaded, .snarkTorrents tfoot th:nth-last-child(5) {
     590.snarkTorrentDownloaded {
    616591     text-align: center;
    617592     white-space: nowrap;
     593}
     594
     595.choked, .unchoked {
     596     font-style: italic;
     597}
     598
     599.choked {
     600     color: #a00 !important;
     601}
     602
     603.unchoked {
     604     color: #070 !important;
     605}
     606
     607.snarkTorrents tt {
     608     background: #99f;
     609     color: #fff;
     610     border-radius: 2px;
     611     padding: 2px 3px;
     612     margin: 0 3px;
     613     display: inline-block;
     614}
     615
     616#totals {
     617     display: inline-block;
     618     margin: 2px 0 2px 5px;
     619     font-weight: bold !important;
     620}
     621
     622#totals span, #ourDest {
     623     white-space: nowrap;
     624}
     625
     626.routerdown {
     627     color: #001;
     628}
     629
     630/* end main torrents listing */
     631
     632td {
     633     padding: 2px 4px;
     634     color: #272e3f !important;
     635     opacity: 1;
     636     font-size: 9pt;
     637}
     638
     639.mainsection td {
     640     color: #272e3f;
     641}
     642
     643.snarkTorrentEven {
     644     background: #eef;
     645     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
    618646}
    619647
     
    621649     background: #e0e0ff;
    622650     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px);
    623      font-size: 8pt;
    624651}
    625652
     
    636663}
    637664
     665.snarkTorrents tr:hover img {
     666     mix-blend-mode: normal;
     667}
     668
    638669tr:hover .percentBarText {
    639670     opacity: 0.75;
     
    642673.peerinfo:hover td:first-child {
    643674     background: url(images/peer.png) center center no-repeat  #ffd !important;
    644 }
    645 
    646 .snarkTorrents tr:hover img {
    647      mix-blend-mode: normal;
    648675}
    649676
     
    707734     background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px);
    708735     border: 1px solid #99f;
    709      box-shadow: none;
    710736     box-shadow: 0 0 1px rgba(200,200,200,0.8);
    711737     margin: 0 auto;
     
    716742     height: 100%;
    717743     background: #bbf;
    718      background: linear-gradient(to bottom, #fff 0%, #eef 50%, #ddf 50%, #bbf 100%);
     744     background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(221, 221, 255, 0.7) 50%, rgba(187, 187, 255, 0.7) 100%);
    719745     box-shadow: inset 0 0 0 1px #ddf;
    720746}
     
    762788
    763789/* end download bars */
    764 
    765 .choked {
    766      color: #a00 !important;
    767 }
    768 
    769 .unchoked {
    770      color: #070 !important;
    771 }
    772 
    773 .snarkTorrents td:nth-last-child(2) .choked, .snarkTorrents td:nth-last-child(2) .unchoked {
    774      font-style: italic;
    775 }
    776790
    777791.thumb {
     
    908922.snarkTorrentInfo td {
    909923     text-align: left !important;
    910      padding: 3px 0 3px 1px !important;
     924     padding: 4px 0 4px 1px !important;
    911925     border-top: 1px solid #bbf;
    912926     vertical-align: middle;
     
    929943.snarkTorrentInfo tr:last-child td {
    930944     border-bottom: 1px solid #7778bf;
     945     border-top: 1px solid #7778bf;
     946}
     947
     948#infohash {
     949     color: #070;
     950     -moz-user-select: all;
     951     -webkit-user-select: all;
     952     user-select: all;
    931953}
    932954
     
    11271149}
    11281150
     1151#configureAuthor input {
     1152     width: 250px;
     1153}
     1154
    11291155input[type="radio"] {
    11301156     padding: 2px;
     
    12511277.newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child {
    12521278     width: auto !important;
     1279     text-align: right;
    12531280}
    12541281
     
    13811408}
    13821409
    1383 .snarkTorrents tt {
    1384      background: #99f;
    1385      color: #fff;
    1386      border-radius: 2px;
    1387      padding: 2px 3px;
    1388      margin: 0 3px;
    1389      display: inline-block;
    1390 }
    1391 
    1392 .routerdown {
    1393      color: #001;
    1394 }
    1395 
    13961410.trackerconfig {
    13971411     text-align: left !important;
     
    16631677
    16641678/* end Resource Errors */
    1665 
    1666 #totals {
    1667      display: inline-block;
    1668      margin: 2px 0 2px 5px;
    1669      font-weight: bold !important;
    1670 }
    16711679
    16721680/* Downloading Priorities */
     
    17681776
    17691777#setPriority th {
    1770      border-bottom: 1px solid #eef;
     1778     border-bottom: 1px solid #7778bf;
    17711779}
    17721780
     
    17901798}
    17911799
     1800/* Comments Section */
     1801
     1802.snarkCommentInfo, .snarkComments {
     1803     margin: 10px 0 0 !important;
     1804     border: 1px solid #7778bf;
     1805     border-left: none;
     1806     border-right: none;
     1807}
     1808
     1809.iframed .snarkComments {
     1810     border-bottom: none;
     1811}
     1812
     1813.snarkComments {
     1814     margin-top: -1px !important;
     1815     border-top: none !important;
     1816}
     1817
     1818.snarkCommentInfo th, .snarkComments th {
     1819     padding: 8px 5px;
     1820}
     1821
     1822.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
     1823     border-top: 1px solid #bbf;
     1824     background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
     1825}
     1826
     1827.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
     1828     border-top: 1px solid #bbf;
     1829     background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
     1830}
     1831
     1832.snarkCommentInfo th {
     1833     padding: 8px 5px;
     1834     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgb(240, 240, 255));
     1835     padding-left: 30px;
     1836}
     1837
     1838.snarkCommentInfo td, .snarkComments td {
     1839     padding: 6px 5px;
     1840}
     1841
     1842.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     1843     text-align: right;
     1844}
     1845
     1846.snarkCommentInfo td:first-child {
     1847     font-weight: bold;
     1848     white-space: nowrap;
     1849}
     1850
     1851.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
     1852     content: "";
     1853     display: inline-block;
     1854     min-height: 32px;
     1855     vertical-align: middle;
     1856}
     1857
     1858.snarkCommentInfo input.accept {
     1859     float: right;
     1860     margin-right: 5px !important;
     1861}
     1862
     1863.snarkCommentInfo textarea {
     1864     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif !important;
     1865     font-weight: normal;
     1866     width: 100%;
     1867     min-height: 64px;
     1868     height: 64px;
     1869     resize: vertical;
     1870}
     1871
     1872.snarkComments tr:last-child {
     1873     border-top: 1px solid #7778bf !important;
     1874}
     1875
     1876.commentRating, .commentAuthor {
     1877     width: 1%;
     1878}
     1879
     1880#nameRequired {
     1881     float: right;
     1882     margin-right: 5px;
     1883}
     1884
     1885.commentRating {
     1886     padding-right: 10px !important;
     1887}
     1888
     1889.commentRating img {
     1890     margin: 0;
     1891     padding: 0;
     1892     width: 16px;
     1893     height: 16px;
     1894     filter: drop-shadow(0 0 1px rgba(128,0,0,0.3)) !important;
     1895}
     1896
     1897.commentDate {
     1898     width: 100px;
     1899     background: url(images/clock.png) left center no-repeat;
     1900     padding-left: 20px !important;
     1901}
     1902
     1903.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     1904     width: 160px !important;
     1905     min-width: 160px !important;
     1906     padding-right: 2px;
     1907}
     1908
     1909.snarkCommentInfo td:last-child, .snarkComments td:last-child {
     1910     width: 1% !important;
     1911}
     1912
     1913.snarkComments td {
     1914     white-space: nowrap;
     1915}
     1916
     1917.commentAuthorName {
     1918     background: url(images/author.png) left center no-repeat;
     1919     padding-left: 20px;
     1920}
     1921
     1922.commentText {
     1923     white-space: normal;
     1924     text-align: justify;
     1925     width: 90%;
     1926}
     1927
     1928.commentWrapper {
     1929     border: 1px solid #bbf;
     1930     margin: 2px 0;
     1931     padding: 8px 10px 8px 26px;
     1932     border-radius: 3px;
     1933     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(0,0,0,0.3);
     1934     background: url(images/comment.png) 6px center no-repeat #eef;
     1935     background-blend-mode: luminosity;
     1936}
     1937
     1938#commentsConfig .optbox {
     1939     vertical-align: middle !important;
     1940}
     1941
     1942.snarkComments select {
     1943     margin-right: 0 !important;
     1944}
     1945
     1946#commentDeleteAction {
     1947     border-top: 1px solid #bbf;
     1948     background: linear-gradient(to bottom, #fff, #eef);
     1949}
     1950
     1951#commentDeleteAction td {
     1952     padding-right: 6px;
     1953}
     1954
     1955.commentAction, .commentDelete {
     1956     width: 1%;
     1957     white-space: nowrap;
     1958     padding-left: 0;
     1959}
     1960
     1961.addCommentText, .commentText {
     1962     padding-right: 0;
     1963}
     1964
     1965.commentDelete {
     1966     text-align: left;
     1967     padding: 2px 3px 2px 20px !important;
     1968     background: url(../ubergine/images/nuke.png) left center no-repeat;
     1969}
     1970
     1971#newRating td:first-child {
     1972     text-align: center;
     1973}
     1974
     1975#newRating select {
     1976     width: 90%;
     1977     margin-left: 10px;
     1978}
     1979
     1980#myRating td:empty {
     1981     padding: 0 !important;
     1982     border-top: none !important;
     1983     border-bottom: none !important;
     1984}
     1985
     1986#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
     1987     min-height: 0 !important;
     1988}
     1989
     1990.commentRating img {
     1991     margin: 0 0 4px;
     1992     padding: 0;
     1993     font-size: 14pt;
     1994     color: #FF7200;
     1995     text-shadow: 0 0 1px #900;
     1996     filter: none;
     1997}
     1998
     1999/* end Comments section */
     2000
    17922001/* MS Edge 14+ rendering bug fix */
    17932002_:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus {
     
    18082017}
    18092018
    1810 .snarkTorrents th:nth-child(2), .snarkTorrents td:nth-child(2), .snarkTorrents th:nth-child(7),
    1811 .snarkTorrents tfoot th:nth-child(3), .snarkTorrents td.snarkTorrentUploaded, .snarkTorrents th:nth-child(9),
    1812 .snarkTorrents tfoot th:nth-child(5), .snarkTorrents td.snarkTorrentRateUp {
     2019.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp,
     2020.snarkTorrents tfoot th:nth-child(3), .snarkTorrents tfoot th:nth-child(5) {
    18132021     max-width: 0 !important;
    18142022     overflow: hidden;
     
    18222030}
    18232031
    1824 .snarkTorrents td:first-child img, .snarkTorrents td:nth-child(3) img, .snarkTorrents td:nth-child(4) img {
     2032.snarkGraphicStatus img, .snarkTrackerDetails img, .snarkTorrentDetails img {
    18252033     max-height: 14px !important;
    18262034     width: auto;
     2035}
     2036
     2037.snarkGraphicStatus, .snarkTorrentStatus {
     2038     width: 0;
     2039}
     2040
     2041.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     2042     min-width: 0;
    18272043}
    18282044
     
    18322048}
    18332049
    1834 .snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) {
    1835     width: 18px !important;
    1836     padding: 0;
     2050.snarkGraphicStatus {
     2051    max-width: 24px !important;
    18372052}
    18382053
     
    19062121}
    19072122
    1908 .snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
     2123.snarkGraphicStatus {
     2124    max-width: 28px !important;
     2125}
     2126
     2127th.snarkTorrentStatus {
     2128     text-align: right !important;
     2129}
     2130
     2131.snarkTorrentStatus, .snarkTorrentStatus a {
    19092132     white-space: nowrap;
    19102133     font-weight: bold;
     
    19152138}
    19162139
     2140.percentBarOuter, .percentBarText {
     2141     line-height: 11px !important;
     2142     height: 12px !important;
     2143}
     2144
    19172145b.alwaysShow {
    19182146     display: inline;
    1919 }
    1920 
    1921 .snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter {
    1922      width: 100px !important;
    19232147}
    19242148}
     
    19382162     padding-left: 26px !important;
    19392163}
     2164
     2165.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter {
     2166     width: 100px !important;
     2167}
     2168
     2169.peerinfo .snarkTorrentDownloaded .percentBarText, .peerinfo .snarkTorrentDownloaded .percentBarOuter {
     2170     width: 80px !important;
     2171}
    19402172}
    19412173
     
    19592191}
    19602192
     2193.snarkTorrentAction {
     2194     padding-right: 3px !important;
     2195}
     2196
    19612197#configs tr:nth-last-child(n+4) td {
    19622198      padding-top: 3px;
     
    19642200}
    19652201
     2202.snarkTorrentStatus {
     2203     padding-right: 10px;
     2204}
     2205
    19662206.snarkTorrentName {
    19672207     padding-left: 4px;
    19682208}
     2209
     2210.snarkTorrentRateUp, .snarkTorrents tfoot th.snarkTorrentRateUp, .peerinfo .snarkTorrentRateUp {
     2211     padding-right: 10px !important;
     2212}
    19692213}
    19702214
    19712215@media screen and (min-width: 1400px) {
    1972 body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea {
     2216body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea, .snarkCommentInfo textarea {
    19732217     font-size: 10pt !important;
    19742218}
     
    20332277.debuginfo td {
    20342278     font-size: 10pt !important;
    2035      word-spacing: 0em;
     2279     word-spacing: 0;
    20362280     padding-top: 4px !important;
    20372281     padding-bottom: 4px !important;
     
    20602304/* end responsive layout */
    20612305
    2062 /* Comments Section */
    2063 /* TODO: merge with other rules where applicable */
    2064 
    2065 .snarkCommentInfo, .snarkComments {
    2066      margin: 10px 0 0 !important;
    2067      border: 1px solid #7778bf;
    2068      border-left: none;
    2069      border-right: none;
    2070 }
    2071 
    2072 .snarkCommentInfo th, .snarkComments th {
    2073      padding: 8px 5px;
    2074 }
    2075 
    2076 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
    2077      border-top: 1px solid #bbf;
    2078      background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
    2079 }
    2080 
    2081 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
    2082      border-top: 1px solid #bbf;
    2083      background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff;
    2084 }
    2085 
    2086 .snarkCommentInfo th {
    2087      padding: 8px 5px;
    2088      background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgb(240, 240, 255));
    2089      padding-left: 30px;
    2090 }
    2091 
    2092 .snarkCommentInfo td, .snarkComments td {
    2093      padding: 8px 5px;
    2094 }
    2095 
    2096 .snarkCommentInfo td:first-child {
    2097      white-space: nowrap;
    2098 }
    2099 
    2100 .snarkCommentInfo td:first-child {
    2101      font-weight: bold;
    2102 }
    2103 
    2104 .snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
    2105      content: "";
    2106      display: inline-block;
    2107      min-height: 32px;
    2108      vertical-align: middle;
    2109 }
    2110 
    2111 .snarkCommentInfo input.accept {
    2112      float: right;
    2113      margin-right: 5px !important;
    2114 }
    2115 
    2116 .snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
    2117      width: 100%;
    2118      min-height: 64px;
    2119      height: 64px;
    2120      resize: vertical;
    2121 }
    2122 
    2123 .snarkComments tr:first-child, .snarkComments tr:last-child {
    2124      text-align: left;
    2125      border-top: 1px solid #7778bf !important;
    2126 }
    2127 
    2128 .commentRating, .commentAuthor {
    2129      width: 1%;
    2130 }
    2131 
    2132 #nameRequired {
    2133      float: right;
    2134      margin-right: 5px;
    2135 }
    2136 
    2137 .commentRating {
    2138      padding-right: 10px !important;
    2139 }
    2140 
    2141 .commentRating img {
    2142      margin: 0;
    2143      padding: 0;
    2144      width: 16px;
    2145      height: 16px;
    2146 }
    2147 
    2148 .commentDate {
    2149      width: 100px;
    2150      background: url(images/clock.png) left center no-repeat;
    2151      padding-left: 20px !important;
    2152 }
    2153 
    2154 .snarkCommentInfo td:first-child, .snarkComments td:first-child {
    2155      width: 160px !important;
    2156      padding-right: 2px;
    2157 }
    2158 
    2159 .snarkCommentInfo td:last-child, .snarkComments td:last-child {
    2160      width: 1% !important;
    2161 }
    2162 
    2163 .snarkComments td {
    2164      white-space: nowrap;
    2165 }
    2166 
    2167 .commentAuthorName {
    2168      background: url(images/author.png) left center no-repeat;
    2169      padding-left: 20px;
    2170 }
    2171 
    2172 .commentText {
    2173      white-space: normal;
    2174      text-align: justify;
    2175      width: 90%;
    2176 }
    2177 
    2178 .commentWrapper {
    2179      border: 1px solid #bbf;
    2180      margin: 2px 0;
    2181      padding: 8px 10px 8px 26px;
    2182      border-radius: 3px;
    2183      box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 rgba(0,0,0,0.3);
    2184      background: url(images/comment.png) 6px center no-repeat #eef;
    2185      background-blend-mode: luminosity;
    2186 }
    2187 
    2188 .commentText .optbox {
    2189      position: fixed;
    2190      right: 20px;
    2191      top: 10px;
    2192 }
    2193 
    2194 #commentsConfig .optbox {
    2195      vertical-align: middle !important;
    2196 }
    2197 
    2198 .snarkComments select {
    2199      margin-right: 0 !important;
    2200 }
    2201 
    2202 #commentDeleteAction {
    2203      border-top: 1px solid #bbf;
    2204      background: linear-gradient(to bottom, #fff, #eef);
    2205 }
    2206 
    2207 #commentDeleteAction td {
    2208      padding-right: 6px;
    2209 }
    2210 
    2211 .commentAction, .commentDelete {
    2212      width: 1%;
    2213      white-space: nowrap;
    2214 /*     min-width: 180px !important;*/
    2215      padding-left: 0;
    2216 }
    2217 
    2218 .addCommentText, .commentText {
    2219      padding-right: 0;
    2220 }
    2221 
    2222 .commentAction input[type="submit"] {
    2223      margin-top: 10px;
    2224      margin-bottom: 10px;
    2225 }
    2226 
    2227 .commentDelete {
    2228      text-align: left;
    2229 }
    2230 
    2231 #newRating td {
    2232      padding-top: 10px !important;
    2233      padding-bottom: 10px !important;
    2234 }
    2235 
    2236 #myRating td:empty {
    2237      padding: 0 !important;
    2238      border-top: none !important;
    2239      border-bottom: none !important;
    2240 }
    2241 
    2242 #myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
    2243      min-height: 1px !important;
    2244 }
    2245 
    2246 .commentRating img {
    2247      margin: 0 0 4px;
    2248      padding: 0;
    2249      font-size: 14pt;
    2250      color: #FF7200;
    2251      text-shadow: 0 0 1px #900;
    2252      filter: none;
    2253 }
    2254 
    2255 /* end Comments section */
  • installer/resources/themes/snark/midnight/snark.css

    ra9bf1e29 r4da95af  
    267267     position: sticky;
    268268     top: -3px;
     269     z-index: 1;
    269270}
    270271
     
    312313}
    313314
    314 tr {
    315      opacity: 1;
    316 }
    317 
    318315thead, tfoot {
    319316     background: #001;
     
    325322
    326323th {
    327      font-size: 8pt;
    328324     padding: 8px 2px;
    329325     color: #c9ceff;
     
    331327     border-bottom: 1px solid #443da0;
    332328     background: #001;
     329     font-size: 9pt;
    333330}
    334331
     
    338335
    339336th:first-child {
    340      padding-left: 2px;
    341337     text-align: left !important;
    342338}
     
    372368}
    373369
    374 .headerstatus {
    375      text-align: left;
    376 }
    377 
    378 .headerpriority {
    379      padding-left: 10px;
    380      text-align: left;
    381 }
    382 
    383 .ParentDir {
    384      font-size: 8pt;
    385      padding: 4px 0;
    386      text-align: left !important;
    387      border: 1px solid #1d1b3f !important;
    388      border-right: 0 !important;
    389      border-left: 0 !important;
    390      background: #001;
    391 }
    392 
    393 .ParentDir a {
    394      font-weight: bold !important;
    395      margin-left: -4px;
    396      display: inline-block;
    397      width: 100%;
    398 }
     370/* main torrent listing */
    399371
    400372.snarkTorrents {
     
    408380}
    409381
     382.snarkTorrents th br {
     383     display: none; /* kill double height button display */
     384}
     385
    410386.snarkTorrents th {
    411387     text-align: center;
    412 }
    413 
    414 .snarkTorrents thead th:first-child {
    415      width: 36px;
    416      text-align: center !important;
    417 }
    418 
    419 .snarkTorrents th:nth-child(2) {
    420      text-align: left;
    421 }
    422 
    423 .snarkTorrents th br {
    424      display: none; /* kill double height button display */
    425 }
    426 
    427 .snarkTorrents tbody tr:last-child td {
    428      border-bottom: 1px solid #443da0 !important;
    429 }
    430 
    431 .snarkTorrents tfoot, .snarkTorrents tfoot th {
    432      font-weight: normal !important;
    433      border-top: 1px solid #443da0 !important;
    434 }
    435 
    436 .snarkTorrents tfoot th::first-line {
    437      font-weight: bold;
    438 }
    439 
    440 .snarkTorrents tfoot th:nth-child(n+2) {
    441      white-space: nowrap;
    442 }
    443 
    444 .snarkTorrents tfoot th:nth-child(2) {
    445      text-align: center;
    446 }
    447 
    448 .snarkTorrents th:nth-child(n+4) {
    449      text-align: center;
    450 }
    451 
    452 .snarkTorrents tfoot th, .SnarkTorrents tfoot th tt {
    453      font-weight: bold;
    454 }
    455 
    456 .snarkTorrents tfoot th tt {
    457      margin-left: 2px;
    458 }
    459 
    460 .snarkTorrents tfoot th:nth-child(3) {
    461      text-align: center;
    462 }
    463 
    464 .snarkTorrents tfoot th {
    465      vertical-align: top;
    466 }
    467 
    468 .snarkTorrents tfoot th br {
    469      display: inline-block;
    470      margin-left: 20px !important;
    471 }
    472 
    473 .SnarkTorrents td:nth-child(6), .SnarkTorrents td:nth-child(7), .SnarkTorrents td:nth-child(8) {
    474      text-align: center !important;
    475 }
    476 
    477 .snarkTorrents th {
    478      text-align: left;
    479388}
    480389
     
    488397}
    489398
    490 .snarkTorrents td {
    491      line-height: 110%;
    492      text-align: left;
    493      padding: 1px;
    494 }
    495 
    496 .snarkTorrents td:nth-child(1) {
    497      width: 36px !important;
    498 }
    499 
    500 .snarkTorrents td:nth-child(3) {
    501      width: 16px !important;
    502      padding: 0 !important;
    503      text-align: right !important;
    504 }
    505 
    506 .snarkTorrents td:nth-child(4) {
    507      width: 16px !important;
    508      padding: 0 2px 0 0 !important;
    509      text-align: center !important;
    510 }
    511 
    512 .peerinfo td:nth-child(4) {
    513      font-weight: bold;
    514 }
    515 
    516 .snarkTorrents td[colspan="10"] {
    517      padding: 2px;
     399.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrents th:last-child:empty, .snarkTorrents td:last-child:empty {
     400     width: 0 !important;
    518401}
    519402
     
    525408.snarkTorrents tt {
    526409     font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
    527      font-size: 8pt;
    528410     background: #2d103f;
    529411     color: #fff;
     
    535417}
    536418
     419.snarkTorrents tbody tr:last-child td {
     420     border-bottom: 1px solid #443da0 !important;
     421}
     422
     423.snarkTorrents tfoot, .snarkTorrents tfoot th {
     424     font-weight: normal !important;
     425     border-top: 1px solid #443da0 !important;
     426}
     427
     428.snarkTorrents tfoot th::first-line {
     429     font-weight: bold;
     430}
     431
     432.snarkTorrents tfoot th:nth-child(n+2) {
     433     white-space: nowrap;
     434}
     435
     436.snarkTorrents tfoot th:nth-child(2) {
     437     text-align: center;
     438}
     439
     440.snarkTorrents th:nth-child(n+4) {
     441     text-align: center;
     442}
     443
     444.snarkTorrents tfoot th, .SnarkTorrents tfoot th tt {
     445     font-weight: bold;
     446}
     447
     448.snarkTorrents tfoot th tt {
     449     margin-left: 2px;
     450}
     451
     452.snarkTorrents tfoot th:nth-child(3) {
     453     text-align: center;
     454}
     455
     456.snarkTorrents tfoot th {
     457     vertical-align: top;
     458}
     459
     460.snarkTorrents tfoot th br {
     461     display: inline-block;
     462     margin-left: 20px !important;
     463}
     464
     465.snarkTorrents td {
     466     line-height: 110%;
     467     text-align: left;
     468     padding: 1px;
     469}
     470
     471.snarkTorrents td[colspan="10"] {
     472     padding: 2px;
     473}
     474
     475th.snarkTorrentStatus {
     476     text-align: center !important;
     477}
     478
     479.snarkTrackerDetails, .SnarkTorrentDetails {
     480     width: 16px !important;
     481     padding: 0 !important;
     482     text-align: center !important;
     483}
     484
     485.snarkTrackerDetails {
     486     text-align: right !important;
     487}
     488
     489.snarkGraphicStatus, .snarkTorrentStatus {
     490     white-space: nowrap;
     491     width: 1%;
     492}
     493
     494.snarkGraphicStatus {
     495     text-align: center !important;
     496     padding: 2px !important;
     497     width: 26px !important;
     498}
     499
     500.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     501     text-align: center !important;
     502     width: 5%;
     503     min-width: 40px;
     504     white-space: nowrap;
     505}
     506
     507.snarkTorrentName {
     508     line-height: 110%;
     509     padding-left: 3px !important;
     510}
     511
     512.snarkTorrentName a, .snarkDirInfo .snarkFileName a {
     513     font-weight: bold !important;
     514}
     515
     516.snarkTorrentNoneLoaded td {
     517     border-bottom: 1px solid #443da0;
     518     text-align: center !important;
     519     font-weight: bold;
     520     color: #c9ceff !important;
     521     padding: 10px;
     522     background: #001;
     523}
     524
     525.snarkTorrentStatus {
     526     padding: 2px 5px 2px 2px !important;
     527     text-align: left !important;
     528     text-align: left !important;
     529     color: #9b96e0 !important;
     530     white-space: nowrap;
     531}
     532
     533.snarkTorrentStatus b {
     534     margin-right: 3px;
     535}
     536
     537.snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
     538     line-height: 90%;
     539     padding: 0 3px;
     540}
     541
     542.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
     543     text-align: center !important;
     544}
     545
     546.snarkTorrentDownloaded {
     547     font-weight: bold;
     548     color: #c9ceff !important;
     549     padding: 0 5px;
     550     white-space: nowrap;
     551}
     552
     553.snarkTorrentUploaded {
     554     color: #7670c2 !important;
     555}
     556
     557.snarkTorrentRateUp {
     558     color: #7670c2 !important;
     559}
     560
     561.snarkTorrentRateDown {
     562     color: #7670c2 !important;
     563}
     564
     565.snarkTorrents img {
     566     padding: 2px !important;
     567}
     568
     569.snarkTorrents a {
     570     display: inline-block;
     571     width: 100%;
     572}
     573
     574.snarkTorrents th a {
     575     display: inline;
     576}
     577
     578.snarkTorrents th img {
     579     padding: 2px !important;
     580     margin-bottom: 2px !important;
     581}
     582
     583.snarkTorrents thead th:last-child img {
     584     padding: 2px !important;
     585}
     586
     587.snarkTorrents tfoot th {
     588     padding: 6px 4px !important;
     589     background: #000;
     590}
     591
     592.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
     593     background: #040033 !important;
     594}
     595
     596.snarkTorrents tr:hover td, .snarkDirInfo tr:hover td {
     597     color: #c9ceff !important;
     598}
     599
     600.snarkTorrentETA {
     601     font-style: italic;
     602     color: #7b74e0 !important;
     603     padding-left: 3px !important;
     604     padding-right: 3px !important;
     605     text-align: center !important;
     606}
     607
     608.snarkTorrentAction {
     609     width: 1% !important;
     610     padding: 1px 2px 1px 1px !important;
     611     text-align: center !important;
     612     white-space: nowrap;
     613}
     614
     615.snarkTorrentAction img {
     616     margin: 0 2px !important;
     617     opacity: 1;
     618}
     619
     620.snarkTorrentAction img:hover {
     621     opacity: 1;
     622     box-shadow: 0 0 1px 1px #652787;
     623}
     624
     625.snarkTorrentAction input[type="image"] {
     626     background: linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
     627     border: 1px solid #443da0 !important;
     628     border: 1px solid #171c3f !important;
     629     box-shadow: inset 0 0 0 1px #000;
     630     padding: 4px !important;
     631     border-radius: 2px;
     632     text-align: center;
     633     mix-blend-mode: normal;
     634     margin: 0 2px;
     635}
     636
     637th.snarkTorrentAction input[type="image"] {
     638     width: 20px;
     639     padding: 4px !important;
     640     margin-bottom: 1px;
     641}
     642
     643td.snarkTorrentAction input[type="image"] {
     644     width: 10px;
     645}
     646
     647.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
     648/* borders on hover only for torrent control buttons, otherwise drop-shadow */
     649     border: 1px solid #652787 !important;
     650}
     651
     652.snarkTorrentAction input[type="image"]:active {
     653     box-shadow: inset 3px 3px 2px #000;
     654}
     655
     656.peerinfo td:nth-child(4) {
     657     font-weight: bold;
     658}
     659
     660/* end main torrent listing */
     661
    537662.snarkTorrentInfo img {
    538663     max-height: 16px !important;
     
    550675
    551676.snarkTorrentInfo th {
    552      padding: 4px !important;
     677     padding: 8px 4px !important;
    553678     text-align: left;
    554679     border-top: none;
     
    561686}
    562687
    563 .snarkTorrentInfo th:nth-child(2) {
    564      font-size: 9pt;
    565      padding: 5px 5px 5px 0 !important;
     688.snarkTorrentInfo th:nth-child(2), .snarkTorrentInfo td:nth-child(2) {
     689     padding-left: 0 !important;
    566690}
    567691
     
    569693     text-align: left !important;
    570694     vertical-align: middle !important;
    571      font-size: 9pt;
     695     padding: 6px 4px;
    572696}
    573697
    574698.snarkTorrentInfo td:first-child {
    575699     width: 20px !important;
    576      padding: 3px 4px 4px !important;
    577700}
    578701
     
    583706
    584707.snarkTorrentInfo tr:nth-last-child(2) td {
    585      padding: 5px 2px;
     708     padding: 6px 2px;
    586709}
    587710
     
    609732     color: #7670c2;
    610733     background: #02001a;
     734}
     735
     736#infohash {
     737     color: #cc0;
     738     -moz-user-select: all;
     739     -webkit-user-select: all;
     740     user-select: all;
    611741}
    612742
     
    617747}
    618748
     749.snarkDirInfo th {
     750     padding: 4px 6px;
     751}
     752
    619753.snarkDirInfo th img {
    620754     margin: 0 !important;
    621755}
    622756
    623 
    624757.snarkDirInfo th:nth-child(2) {
    625758     padding-right: 10px;
     
    631764
    632765.snarkDirInfo th:first-child {
    633      padding-left: 5px;
     766     padding-left: 6px;
    634767}
    635768
     
    639772}
    640773
    641 .snarkDirInfo td:first-child img {
    642      padding-right: 6px;
    643 }
    644 
    645774.snarkDirInfo tr:last-child td {
    646775     border-bottom: 1px solid #443da0 !important;
     
    656785}
    657786
    658 .headerpriority input[type=submit] {
    659      margin: 5px;
    660 }
    661 
    662 table.SnarkDirInfo img {
     787.SnarkDirInfo img {
    663788     max-width: 16px;
    664789     max-height: 16px;
     
    671796}
    672797
    673 td.subHeaderPriority, td.priority {
     798.ParentDir {
     799     padding: 6px !important;
     800     text-align: left !important;
     801     border: 1px solid #1d1b3f !important;
     802     border-right: 0 !important;
     803     border-left: 0 !important;
     804     background: #001;
     805}
     806
     807.ParentDir a {
     808     font-weight: bold !important;
     809     margin-left: -4px;
     810     display: inline-block;
     811     width: 100%;
     812}
     813
     814.parentDir img {
     815     margin-right: 5px;
     816     padding-left: 3px;
     817}
     818
     819.parentDir img {
     820     mix-blend-mode: luminosity;
     821}
     822
     823.headerstatus {
     824     text-align: center;
     825}
     826
     827.headerpriority {
     828     padding-left: 10px;
     829     text-align: left;
     830}
     831
     832.headerpriority input[type=submit] {
     833     margin: 5px;
     834}
     835
     836.subHeaderPriority, .priority {
    674837     width: 0;
    675838     min-width: 160px !important;
     
    678841}
    679842
    680 td.subHeaderPriority {
    681      font-size: 7.5pt;
     843.subHeaderPriority {
    682844     font-weight: bold;
    683845     padding: 0 1px !important;
     
    717879}
    718880
    719 .parentDir img {
    720      padding-left: 3px;
    721      mix-blend-mode: luminosity;
    722 }
    723 
    724881.snarkFileStatus {
    725882     font-size: 8pt;
     
    749906}
    750907
    751 td:first-child {
    752      font-size: 9pt;
     908#configs td:first-child, .snarkCommentInfo td:first-child, .snarkComments td:first-child {
    753909     text-align: right;
    754 }
    755 
    756 .center {
    757      text-align: center !important;
    758 }
    759 
    760 .snarkTorrentName {
    761      line-height: 110%;
    762      padding: 0;
    763      font-size: 8.5pt;
    764 }
    765 
    766 .snarkTorrentName a, .snarkDirInfo td.snarkFileName a {
    767      font-weight: bold !important;
    768 }
    769 
    770 .snarkTorrentAction {
    771      width: 60px;
    772      margin: 0 !important;
    773      padding: 1px !important;
    774      text-align: center !important;
    775 }
    776 
    777 /* MS Edge fix */
    778 _:-ms-lang(x), .snarkTorrentAction {
    779      width: 72px !important;
    780 }
    781 
    782 .snarkTorrentAction img {
    783      margin: 0 2px !important;
    784      opacity: 1;
    785 }
    786 
    787 .snarkTorrentAction img:hover {
    788      opacity: 1;
    789      box-shadow: 0 0 1px 1px #652787;
    790 }
    791 
    792 td.snarkTorrentAction {
    793      width: 66px;
    794      min-width: 66px;
    795 }
    796 
    797 .snarkTorrentNoneLoaded {
    798      font-size: 8.5pt;
    799      font-weight: bold;
    800      padding: 10px 5px;
    801      text-align: center !important;
    802      color: #3222ff !important;
    803      border-bottom: 1px solid #443da0;
    804      background: #001;
    805 }
    806 
    807 .snarkTorrentStatus {
    808      padding: 2px 2px 2px 0;
    809      text-align: left !important;
    810      font-size: 8pt;
    811      min-width: 48px;
    812      text-align: left !important;
    813      color: #9b96e0 !important;
    814      white-space: nowrap;
    815 }
    816 
    817 .snarkTorrentStatus {
    818      padding-right: 3px !important;
    819 }
    820 
    821 .snarkTorrentStatus b {
    822      margin-right: 3px;
    823 }
    824 
    825 .snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
    826      font-size: 8pt;
    827      line-height: 90%;
    828      padding: 0 3px;
    829 }
    830 
    831 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
    832      text-align: center !important;
    833 }
    834 
    835 .snarkTorrentDownloaded {
    836      color: #c9ceff !important;
    837      white-space: nowrap;
    838 }
    839 
    840 td.snarkTorrentDownloaded {
    841      font-weight: bold;
    842      padding: 0 5px;
    843 }
    844 
    845 .snarkTorrentUploaded {
    846      color: #7670c2 !important;
    847 }
    848 
    849 .snarkTorrentRateUp {
    850      color: #7670c2 !important;
    851 }
    852 
    853 .snarkTorrentRateDown {
    854      color: #7670c2 !important;
    855 }
    856 
    857 .snarkTorrents img {
    858      padding: 2px !important;
    859 }
    860 
    861 .snarkTorrents th img {
    862      padding: 2px !important;
    863      margin-bottom: 2px !important;
    864 }
    865 
    866 .snarkTorrents thead th:last-child img {
    867      padding: 2px !important;
    868 }
    869 
    870 .snarkTorrents tfoot th {
    871      padding: 6px 4px !important;
    872      background: #000;
    873 }
    874 
    875 .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
    876      background: #040033 !important;
    877 }
    878 
    879 .snarkTorrents tr:hover td, .snarkDirInfo tr:hover td {
    880      color: #c9ceff !important;
    881910}
    882911
     
    887916tr:hover .percentBarText {
    888917     opacity: 0.9;
    889 }
    890 
    891 .snarkTorrents a {
    892      display: inline-block;
    893      width: 100%;
    894 }
    895 
    896 .snarkTorrents th a {
    897      display: inline;
    898918}
    899919
     
    957977     text-align: left;
    958978     white-space: nowrap;
    959 }
    960 
    961 .snarkTorrentETA {
    962      font-style: italic;
    963      color: #7b74e0 !important;
    964      padding-left: 3px !important;
    965      padding-right: 3px !important;
    966      text-align: center !important;
    967979}
    968980
     
    10131025}
    10141026
     1027.peerinfo .percentBarInner {
     1028     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%);
     1029}
     1030
    10151031.snarkDirInfo .percentBarInner[style="width: 0%;"] .percentBarText {
    10161032     opacity: 0.9;
     
    10311047     text-align: center;
    10321048     font-weight: bold !important;
    1033      line-height: 16px;
     1049     line-height: 17px;
    10341050     white-space: nowrap;
    10351051     display: block;
     
    13471363     mix-blend-mode: normal !important;
    13481364     filter: drop-shadow(0 0 1px #f60) !important;
    1349 }
    1350 
    1351 .snarkTorrentAction {
    1352      white-space: nowrap;
    1353 }
    1354 
    1355 .snarkTorrents td:last-child {
    1356      padding: 4px 2px !important;
    1357 }
    1358 
    1359 .snarkTorrents th:last-child input[type="image"],
    1360 .snarkTorrents td:last-child input[type="image"] {
    1361      background: linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
    1362      border: 1px solid #443da0 !important;
    1363      border: 1px solid #171c3f !important;
    1364      box-shadow: inset 0 0 0 1px #000;
    1365      padding: 4px !important;
    1366      border-radius: 2px;
    1367      text-align: center;
    1368      mix-blend-mode: normal;
    1369      margin: 0 2px;
    1370 }
    1371 
    1372 .snarkTorrents th:last-child input[type="image"] {
    1373      width: 20px;
    1374      padding: 4px !important;
    1375      margin-bottom: 1px;
    1376 }
    1377 
    1378 .snarkTorrents td:last-child input[type="image"] {
    1379      width: 10px;
    1380 }
    1381 
    1382 .snarkTorrents th:last-child input[type="image"]:hover,
    1383 .snarkTorrents th:last-child input[type="image"]:focus,
    1384 .snarkTorrents td:last-child input[type="image"]:hover,
    1385 .snarkTorrents td:last-child input[type="image"]:focus {
    1386 /* borders on hover only for torrent control buttons, otherwise drop-shadow */
    1387      border: 1px solid #652787 !important;
    1388 }
    1389 
    1390 .snarkTorrents th:last-child input[type="image"]:active,
    1391 .snarkTorrents td:last-child input[type="image"]:active {
    1392      box-shadow: inset 3px 3px 2px #000;
    13931365}
    13941366
     
    15611533}
    15621534
     1535/* pagenav */
     1536
    15631537#pagenav img.disable,
    15641538#pagenav img.disable:hover {
     
    15991573}
    16001574
    1601 .newtorrentsection td:first-child,
    1602 .addtorrentsection td:first-child {
     1575/* end pagenav */
     1576
     1577.newtorrentsection td:first-child, .addtorrentsection td:first-child {
    16031578     font-weight: bold;
    16041579     padding-right: 5px;
    16051580     padding-left: 5px;
    16061581     white-space: nowrap;
    1607 }
    1608 
    1609 .newtorrentsection td:first-child,
    1610 .addtorrentsection td:first-child {
    16111582     width: 120px;
     1583     text-align: right;
    16121584}
    16131585
     
    17181690}
    17191691
    1720 .snarkTorrentNoneLoaded td {
    1721      color: #c9ceff !important;
    1722      padding: 10px;
    1723      background: #001;
    1724 }
    1725 
    17261692.snarkNewTorrent td {
    17271693     padding: 2px 3px;
    17281694}
    17291695
    1730 .snarkNewTorrent td:nth-child(2),
    1731 .snarkNewTorrent td:nth-child(3) {
     1696.snarkNewTorrent td:nth-child(2), .snarkNewTorrent td:nth-child(3) {
    17321697     font-weight: bold;
    17331698     padding-right: 5px;
     
    17581723}
    17591724
     1725#configs input.r, #configs input[type="text"], select {
     1726     min-width: 120px;
     1727}
     1728
     1729input[name="nofilter_commentsName"] {
     1730     width: 250px;
     1731}
    17601732
    17611733#configs td, .trackerconfig td {
     
    23212293}
    23222294
    2323 /* MS Edge fix */
    2324 _:-ms-lang(x), * {
    2325      filter: none !important;
    2326 }
    2327 
    2328 /* responsive layout */
    2329 
    2330 @media screen and (max-width: 950px) {
    2331 .snarkTorrents td:nth-child(2) {
    2332      white-space: nowrap;
    2333 }
    2334 .snarkTorrents td[colspan="10"] {
    2335      white-space: normal;
    2336 }
    2337 
    2338 .snarkTorrentStatus b {
    2339      display: none;
    2340 }
    2341 
    2342 b.alwaysShow {
    2343      display: inline;
    2344 }
    2345 
    2346 .snarkTorrents th:first-child, .snarkTorrents td:first-child {
    2347      width: 26px !important;
    2348 }
    2349 
    2350 .snarkTorrents td:first-child img {
    2351      max-height: 16px;
    2352 }
    2353 
    2354 .snarkTorrents td:nth-child(2) {
    2355      font-weight: bold;
    2356 }
    2357 }
    2358 
    2359 @media screen and (max-width: 1200px) {
    2360 .dirInfoComplete {
    2361      display: none;
    2362 }
    2363 
    2364 .snarkRefresh:link, .snarkRefresh:link:first-child {
    2365      padding-left: 24px !important;
    2366 }
    2367 
    2368 .snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus {
    2369      background-size: 14px 14px, 100% 100% !important;
    2370 }
    2371 
    2372 .snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active,
    2373 .snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active {
    2374      background-size: 14px 14px !important;
    2375 }
    2376 
    2377 .snarkTorrents th:first-child, .snarkTorrents td:first-child {
    2378      width: 30px !important;
    2379 }
    2380 
    2381 .peerinfo .percentBarText, .snarkDirInfo .percentBarText  {
    2382      line-height: 18px;
    2383 }
    2384 
    2385 .percentBarText, .percentBarOuter {
    2386      width: 100px;
    2387 }
    2388 
    2389 .snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
    2390      width: 60px;
    2391 }
    2392 
    2393 .snarkTorrentDownloaded .percentBarInner {
    2394      background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 50px, rgba(0, 255, 0, 0.5));
    2395 }
    2396 
    2397 .snarkDirInfo .percentBarInner {
    2398      background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 30px, rgba(0, 255, 0, 0.5));
    2399 }
    2400 
    2401 .configsectionpanel .snarkConfigTitle {
    2402      font-size: 10.5pt !important;
    2403 }
    2404 
    2405 .knownTracker a, #trackerselect a {
    2406      display: inline-block;
    2407      overflow: hidden;
    2408      text-overflow: ellipsis;
    2409      max-width: 210px;
    2410      white-space: nowrap;
    2411 }
    2412 
    2413 #trackerselect a {
    2414      max-width: 280px;
    2415 }
    2416 }
    2417 
    2418 @media screen and (max-width: 1400px) {
    2419 .iframed .snarkMessages {
    2420      margin-top: -4px;
    2421 }
    2422 
    2423 .addtorrentsection, .newtorrentsection, .configsection {
    2424      margin-left: 0;
    2425      margin-right: 0;
    2426 }
    2427 
    2428 .configsection {
    2429      margin-bottom: 0;
    2430 }
    2431 
    2432 .configsectionpanel .snarkConfigTitle {
    2433      margin-top: -1px;
    2434 }
    2435 }
    2436 
    2437 @media screen and (min-width: 1200px) {
    2438 a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"] {
    2439      font-size: 9pt !important;
    2440 }
    2441 
    2442 .snarkRefresh {
    2443      font-size: 10.5pt !important;
    2444 }
    2445 
    2446 .snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link {
    2447      font-size: 11pt !important;
    2448 }
    2449 
    2450 .percentDownloaded {
    2451      pointer-events: none; /* hide tooltip */
    2452 }
    2453 }
    2454 
    2455 @media screen and (min-width: 1400px) {
    2456 code, textarea, .snarkMessages li, .snarkMessages a, input, tt {
    2457      font-size: 10pt !important;
    2458 }
    2459 
    2460 a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"], input, code {
    2461      font-size: 10pt !important;
    2462 }
    2463 
    2464 .snarkConfigTitle, .toggleview {
    2465      padding: 4px 25px 4px 22px;
    2466 }
    2467 
    2468 .snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
    2469      font-size: 12.5pt !important;
    2470 }
    2471 
    2472 .toggleview {
    2473      padding-bottom: 5px !important;
    2474 }
    2475 
    2476 .snarkConfigTitle, label.toggleview {
    2477      min-width: 240px !important;
    2478 }
    2479 
    2480 .snarkMessages {
    2481      height: 54px;
    2482 }
    2483 
    2484 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
    2485      text-align: center !important;
    2486      width: 24px !important;
    2487 }
    2488 
    2489 .snarkTorrentDownloaded {
    2490      white-space: nowrap;
    2491      padding: 0 10px !important;
    2492 }
    2493 
    2494 .snarkFileStatus {
    2495      white-space: nowrap;
    2496 }
    2497 
    2498 .snarkTorrents td {
    2499      padding-top: 4px;
    2500      padding-bottom: 4px;
    2501 }
    2502 
    2503 .page {
    2504      padding: 10px;
    2505      background: #003;
    2506      background: linear-gradient(to right, #004, #002, #004);
    2507      background: linear-gradient(to right, #002, #004, #002);
    2508      box-shadow: inset 0 0 0 1px #000;
    2509 }
    2510 
    2511 .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .snarkMessages, .snarkTorrents, .snarkDirInfo, .snarkTorrentInfo {
    2512      border: 1px solid #443da0;
    2513 }
    2514 
    2515 .snarkDirInfo {
    2516      margin-bottom: 0;
    2517 }
    2518 
    2519 .snarkMessages {
    2520      margin-bottom: -10px;
    2521 }
    2522 
    2523 .snarkMessages + form {
    2524      margin-top: 9px;
    2525 }
    2526 
    2527 .logshim {
    2528      margin-top: -9px !important;
    2529 }
    2530 
    2531 .snarkTorrents {
    2532      margin-top: 0 !important;
    2533 }
    2534 
    2535 .mainsection {
    2536      background: none;
    2537 }
    2538 
    2539 #pagenav img {
    2540      height: 16px;
    2541 }
    2542 }
    2543 
    2544 /* end responsive layout */
    2545 
    25462295/* Comments Section */
    2547 /* TODO: merge with other rules where applicable */
    25482296
    25492297.snarkCommentInfo, .snarkComments {
     
    25542302}
    25552303
     2304.iframed .snarkCommentInfo, .iframed .snarkComments {
     2305     border-left: none;
     2306     border-right: none;
     2307}
     2308
     2309.snarkComments {
     2310     margin-top: -1px !important;
     2311     border-top: 1px inset #12111f;
     2312}
     2313
    25562314.snarkCommentInfo th {
    25572315     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #121225, #00000d);
     
    25592317}
    25602318
    2561 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
     2319.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
    25622320     background: #010010;
    25632321     border-bottom: 1px inset #12111f;
    25642322}
    25652323
    2566 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
     2324.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
    25672325     background: #010008;
    25682326     border-bottom: 1px inset #12111f;
     
    25972355}
    25982356
    2599 .snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
     2357.snarkCommentInfo textarea {
    26002358     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
    26012359     font-weight: normal;
     
    26362394.snarkCommentInfo td:first-child, .snarkComments td:first-child {
    26372395     width: 160px !important;
     2396     min-width: 160px !important;
    26382397     padding-right: 2px;
    26392398}
     
    26522411}
    26532412
    2654 td.commentText {
     2413.commentText {
    26552414     white-space: normal;
    26562415     text-align: justify;
     
    26682427}
    26692428
    2670 .commentText .optbox {
    2671      position: fixed;
    2672      right: 20px;
    2673      top: 10px;
    2674 }
    2675 
    26762429#commentsConfig .optbox {
    26772430     vertical-align: middle !important;
     
    26942447     width: 1%;
    26952448     white-space: nowrap;
    2696 /*     min-width: 180px !important;*/
    26972449     padding-left: 0;
    26982450}
     
    27082460
    27092461.commentDelete {
    2710      text-align: left;
     2462     background: url(../ubergine/images/nuke.png) 2px center no-repeat;
     2463     text-align: center;
     2464     padding-left: 22px !important;
    27112465}
    27122466
     
    27142468     padding-top: 10px !important;
    27152469     padding-bottom: 10px !important;
     2470}
     2471
     2472#newRating select {
     2473     width: 90%;
    27162474}
    27172475
     
    27382496
    27392497/* end Comments section */
     2498
     2499/* MS Edge fix */
     2500_:-ms-lang(x), * {
     2501     filter: none !important;
     2502}
     2503
     2504/* responsive layout */
     2505
     2506/* mini-mode - hides upload columns + text torrent status in main torrent listing and shrinks other ui elements */
     2507
     2508@media screen and (max-width: 950px) {
     2509td, th, td a, input {
     2510     font-size: 8pt !important;
     2511}
     2512
     2513.snarkTorrents td:nth-child(2) {
     2514     white-space: nowrap;
     2515}
     2516.snarkTorrents td[colspan="10"] {
     2517     white-space: normal;
     2518}
     2519
     2520.snarkTorrentStatus b {
     2521     display: none;
     2522}
     2523
     2524b.alwaysShow {
     2525     display: inline;
     2526}
     2527
     2528.snarkTorrents td:first-child img {
     2529     max-height: 16px;
     2530}
     2531
     2532.snarkTorrentStatus {
     2533     font-weight: bold;
     2534}
     2535
     2536.snarknavbar, .page {
     2537     min-width: 600px !important;
     2538}
     2539
     2540.snarkTorrentName {
     2541     max-width: 260px;
     2542}
     2543
     2544.snarkTorrentStatus, .snarkTorrentUploaded, .snarkTorrentRateUp, tfoot .snarkTorrentAction {
     2545     display: none;
     2546}
     2547
     2548tfoot .snarkTorrentDownloaded, tfoot .snarkTorrentRateDown {
     2549     font-size: 0 !important;
     2550}
     2551
     2552.snarkMessages li:first-child::after {
     2553     content: "minimode";
     2554     display: inline-block;
     2555     font-size: 9pt !important;
     2556     float: right;
     2557     vertical-align: middle;
     2558     position: relative;
     2559     bottom: -38px;
     2560     right: -16px;
     2561     background: rgba(0,0,48,0.3);
     2562     padding: 2px;
     2563     border-radius: 4px;
     2564     z-index: 0;
     2565}
     2566
     2567td.snarkTorrentAction input[type="image"] {
     2568     width: 9px;
     2569}
     2570
     2571textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
     2572     width: 350px !important;
     2573     min-width: 350px !important;
     2574}
     2575
     2576input.trackerhome, input.trackerannounce, .knownTracker a, #trackerselect a {
     2577     max-width: 130px !important;
     2578}
     2579
     2580#configs td:first-child {
     2581     min-width: 150px !important;
     2582}
     2583
     2584.trackerconfig th {
     2585     min-width: 32px;
     2586}
     2587
     2588.trackerconfig td {
     2589     padding 5px 2px !important;
     2590}
     2591
     2592.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     2593     min-width: 0 !important;
     2594     width: 140px !important;
     2595}
     2596
     2597.snarkTorrentInfo a {
     2598     display: inline-block;
     2599     vertical-align: text-top;
     2600     white-space: nowrap;
     2601     overflow: hidden;
     2602     text-overflow: ellipsis;
     2603     max-width: 400px;
     2604}
     2605}
     2606
     2607/* end mini-mode */
     2608
     2609@media screen and (max-width: 1200px) {
     2610.dirInfoComplete {
     2611     display: none;
     2612}
     2613
     2614.snarkRefresh:link, .snarkRefresh:link:first-child {
     2615     padding-left: 24px !important;
     2616}
     2617
     2618.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus {
     2619     background-size: 14px 14px, 100% 100% !important;
     2620}
     2621
     2622.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active,
     2623.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active {
     2624     background-size: 14px 14px !important;
     2625}
     2626
     2627.peerinfo .percentBarText, .snarkDirInfo .percentBarText  {
     2628     line-height: 18px;
     2629}
     2630
     2631.percentBarText, .percentBarOuter {
     2632     width: 100px;
     2633     height: 14px;
     2634}
     2635
     2636.snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarText, .peerinfo .percentBarOuter {
     2637     width: 60px;
     2638}
     2639
     2640.snarkTorrentDownloaded .percentBarInner {
     2641     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 50px, rgba(0, 255, 0, 0.5));
     2642}
     2643
     2644.snarkDirInfo .percentBarInner {
     2645     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(to right, rgba(255, 255, 0, 0.5) 30px, rgba(0, 255, 0, 0.5));
     2646}
     2647
     2648.peerinfo .percentBarInner {
     2649     background: linear-gradient(to bottom, rgba(51, 51, 170, 0.6) 0%, rgba(34, 34, 102, 0.7) 50%, rgba(0, 0, 51, 0.8) 50%, rgba(0, 0, 0, 0.9) 100%);
     2650}
     2651
     2652.configsectionpanel .snarkConfigTitle {
     2653     font-size: 10.5pt !important;
     2654}
     2655
     2656.knownTracker a, #trackerselect a {
     2657     display: inline-block;
     2658     overflow: hidden;
     2659     text-overflow: ellipsis;
     2660     max-width: 210px;
     2661     white-space: nowrap;
     2662}
     2663
     2664#trackerselect a {
     2665     max-width: 280px;
     2666}
     2667}
     2668
     2669@media screen and (max-width: 1400px) {
     2670.iframed .snarkMessages {
     2671     margin-top: -4px;
     2672}
     2673
     2674.addtorrentsection, .newtorrentsection, .configsection {
     2675     margin-left: 0;
     2676     margin-right: 0;
     2677}
     2678
     2679.configsection {
     2680     margin-bottom: 0;
     2681}
     2682
     2683.configsectionpanel .snarkConfigTitle {
     2684     margin-top: -1px;
     2685}
     2686
     2687#snarkCommentSection {
     2688     margin: 23px -1px 0 !important;
     2689}
     2690}
     2691
     2692@media screen and (min-width: 1200px) {
     2693a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"] {
     2694     font-size: 9pt !important;
     2695}
     2696
     2697.snarkRefresh {
     2698     font-size: 10.5pt !important;
     2699}
     2700
     2701.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link {
     2702     font-size: 11pt !important;
     2703}
     2704
     2705.percentDownloaded {
     2706     pointer-events: none; /* hide tooltip */
     2707}
     2708
     2709.snarkTorrentStatus {
     2710     padding-right: 10px !important;
     2711}
     2712}
     2713
     2714@media screen and (min-width: 1400px) {
     2715code, textarea, .snarkMessages li, .snarkMessages a, input, tt {
     2716     font-size: 10pt !important;
     2717}
     2718
     2719a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"], input, code {
     2720     font-size: 10pt !important;
     2721}
     2722
     2723.snarkConfigTitle, .toggleview {
     2724     padding: 4px 25px 4px 22px;
     2725}
     2726
     2727.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
     2728     font-size: 12.5pt !important;
     2729}
     2730
     2731.toggleview {
     2732     padding-bottom: 5px !important;
     2733}
     2734
     2735.snarkConfigTitle, label.toggleview {
     2736     min-width: 240px !important;
     2737}
     2738
     2739.snarkMessages {
     2740     height: 54px;
     2741}
     2742
     2743.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
     2744     text-align: center !important;
     2745     width: 24px !important;
     2746}
     2747
     2748.snarkTorrentDownloaded {
     2749     white-space: nowrap;
     2750     padding: 0 10px !important;
     2751}
     2752
     2753.snarkFileStatus {
     2754     white-space: nowrap;
     2755}
     2756
     2757.snarkTorrents td {
     2758     padding-top: 4px;
     2759     padding-bottom: 4px;
     2760}
     2761
     2762.page {
     2763     padding: 10px;
     2764     background: #003;
     2765     background: linear-gradient(to right, #004, #002, #004);
     2766     background: linear-gradient(to right, #002, #004, #002);
     2767     box-shadow: inset 0 0 0 1px #000;
     2768}
     2769
     2770.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .snarkMessages, .snarkTorrents, .snarkDirInfo, .snarkTorrentInfo {
     2771     border: 1px solid #443da0;
     2772}
     2773
     2774.snarkDirInfo {
     2775     margin-bottom: 0;
     2776}
     2777
     2778.snarkMessages {
     2779     margin-bottom: -10px;
     2780}
     2781
     2782.snarkMessages + form {
     2783     margin-top: 9px;
     2784}
     2785
     2786.logshim {
     2787     margin-top: -9px !important;
     2788}
     2789
     2790.snarkTorrents {
     2791     margin-top: 0 !important;
     2792}
     2793
     2794.mainsection {
     2795     background: none;
     2796}
     2797
     2798#pagenav img {
     2799     height: 16px;
     2800}
     2801}
     2802
     2803/* end responsive layout */
     2804
  • installer/resources/themes/snark/ubergine/snark.css

    ra9bf1e29 r4da95af  
    435435}
    436436
     437/* main torrents listing */
     438
    437439.snarkTorrents {
    438440     background: #212;
     
    452454}
    453455
     456.snarkTorrents tr, .snarkTorrents td {
     457     border-top: 1px solid #202 !important;
     458}
     459
    454460.snarkTorrents thead th {
    455461     border-top: 1px solid transparent !important;
     
    465471}
    466472
    467 .snarkTorrents thead th:first-child {
     473.snarkGraphicStatus, .snarkTorrentStatus {
     474     white-space: nowrap;
     475     width: 1%;
     476}
     477
     478.snarkGraphicStatus {
    468479     text-align: center !important;
    469      width: 16px !important;
    470 }
    471 
    472 .snarkTorrents thead th:nth-child(2) {
    473      text-align: left;
    474      min-width: 50px;
    475 }
     480}
     481
     482.snarkTorrentStatus {
     483     font-weight: normal !important;
     484     padding: 2px 2px 2px 0 !important;
     485     line-height: 110%;
     486     text-align: left !important;
     487}
     488
     489th.snarkTorrentStatus {
     490     text-align: center !important;
     491}
     492
     493.snarkTrackerDetails, .SnarkTorrentDetails {
     494     width: 16px;
     495     padding: 2px 0;
     496}
     497
     498.snarkTrackerDetails {
     499     text-align: right;
     500}
     501
     502.snarkTorrentName {
     503     line-height: 110%;
     504     padding: 2px 1px 2px 3px;
     505}
     506
     507.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize, .snarkTorrentStatus, .snarkFileName {
     508     font-size: 8pt;
     509     font-weight: bold;
     510     padding: 0 3px;
     511     line-height: 100%;
     512}
     513
     514.snarkTorrentUploaded, .snarkTorrentRateUp {
     515     color: #b9b !important;
     516}
     517
     518.snarkTorrentRateDown {
     519     color: #76a !important;
     520}
     521
     522.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     523     width: 5%;
     524     min-width: 40px;
     525     white-space: nowrap;
     526}
     527
     528.snarkTorrentETA {
     529     font-weight: bold;
     530     font-style: italic;
     531     color: #dd7 !important;
     532     line-height: 120%;
     533}
     534
     535.snarkTorrentAction {
     536     padding: 1px 2px 1px 1px !important;
     537     text-align: center;
     538     width: 1%;
     539     white-space: nowrap;
     540}
     541
     542th.snarkTorrentAction input[type="image"] {
     543     padding: 0;
     544     max-width: 32px;
     545     background: #40003f;
     546     border-radius: 2px;
     547     border: 1px solid #202;
     548}
     549
     550th.snarkTorrentAction input[type="image"]:hover {
     551     border: 1px solid #f60;
     552}
     553
     554.snarkTorrentAction img {
     555     margin: 0 2px !important;
     556     opacity: 0.6;
     557}
     558
     559.snarkTorrentAction img:hover {
     560     box-shadow: 0 0 1px 1px #f90;
     561     opacity: 1;
     562}
    476563
    477564.snarkTorrents tfoot {
     
    506593}
    507594
    508 .snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
    509      width: 16px;
    510      padding: 2px 0;
    511 }
    512 
    513 .snarkTorrents .peerinfo td:nth-child(3), .snarkTorrents .peerinfo td:nth-child(4) {
     595.peerinfo td:nth-child(3), .peerinfo td:nth-child(4) {
    514596     padding: 2px 4px;
    515 }
    516 
    517 .snarkTorrents td:nth-child(3) {
    518      text-align: right;
    519597}
    520598
     
    526604}
    527605
    528 td {
    529      padding: 2px 4px;
    530      color: #ddd !important;
    531      opacity: 1;
    532      font-size: 8pt;
    533 }
    534 
    535 .mainsection td {
    536      color: #111;
    537 }
    538 
    539 td:first-child {
    540      text-align: right;
    541      font-size: 8pt;
    542 }
    543 
    544 .center {
    545      text-align: center !important;
    546 }
    547 
    548 .snarkTorrentName {
    549      line-height: 110%;
    550      padding: 2px 1px 2px 3px;
    551 }
    552 
    553 .snarkTorrentName img {
    554      padding: 1px;
    555      text-align: left;
    556      vertical-align: middle;
    557 }
    558 
    559 .snarkTorrentAction {
    560      padding: 1px !important;
    561      text-align: center;
    562      width: 1%;
     606#totals span, #ourDest {
    563607     white-space: nowrap;
    564 }
    565 
    566 .snarkTorrents thead th:last-child {
    567      white-space: nowrap !important;
    568      text-align: center;
    569      padding-right: 4px;
    570      width: 1%;
    571 }
    572 
    573 .snarkTorrents th:last-child input[type="image"] {
    574      padding: 0;
    575      max-width: 32px;
    576      background: #40003f;
    577      border-radius: 2px;
    578      border: 1px solid #202;
    579 }
    580 
    581 .snarkTorrents th:last-child input[type="image"]:hover {
    582      border: 1px solid #f60;
    583 }
    584 
    585 .snarkTorrentAction img {
    586      margin: 0 2px !important;
    587      opacity: 0.6;
    588 }
    589 
    590 .snarkTorrentAction img:hover {
    591      box-shadow: 0 0 1px 1px #f90;
    592      opacity: 1;
    593608}
    594609
     
    603618}
    604619
    605 .snarkTorrentStatus {
    606      padding: 2px 2px 2px 0;
    607      line-height: 110%;
    608      text-align: left !important;
    609 }
    610 
    611 .snarkTorrentStatus img {
    612      margin-right: 10px !important;
    613      margin-left: 6px;
     620.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrentETA:empty, .snarkTorrentAction:empty {
     621     width: 0 !important;
     622     min-width: 0 !important;
     623}
     624
     625/* end main torrents listing */
     626
     627td {
     628     padding: 2px 4px;
     629     color: #ddd !important;
     630     opacity: 1;
     631     font-size: 8pt;
     632}
     633
     634.mainsection td {
     635     color: #111;
     636}
     637
     638td:first-child {
     639     text-align: right;
     640     font-size: 8pt;
    614641}
    615642
     
    620647a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
    621648     mix-blend-mode: initial !important;
    622 }
    623 
    624 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize, .snarkTorrentStatus, .snarkFileName {
    625      font-size: 8pt;
    626      font-weight: bold;
    627      padding: 0 3px;
    628      line-height: 100%;
    629 }
    630 
    631 .snarkTorrentStatus {
    632       font-weight: normal;
    633 }
    634 
    635 .snarkTorrents td:nth-child(2) {
    636      padding-left: 0;
    637 }
    638 
    639 .snarkTorrentUploaded {
    640      color: #b9b !important;
    641 }
    642 
    643 .snarkTorrentRateUp {
    644      color: #b9b !important;
    645 }
    646 
    647 .snarkTorrentRateDown {
    648      color: #76a !important;
    649649}
    650650
     
    657657     font-size: 8pt;
    658658     background: #270027;
    659 }
    660 
    661 .snarkTorrents tr, .snarkTorrents td {
    662      border-top: 1px solid #202 !important;
    663659}
    664660
     
    700696}
    701697
    702 table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
     698.snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
    703699     background: #58165e !important;
    704700     background: linear-gradient(to bottom, #58165e 0%, #4a0d56 100%) !important;
     
    712708
    713709/* MS Edge fix */
    714 _:-ms-lang(x), table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
     710_:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
    715711     box-shadow: none !important;
    716712     background: #58165e !important;
    717713}
    718714
    719 table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody tr:hover td .snarkFileName {
     715.snarkTorrents tbody tr:hover .snarkTorrentName, .snarkDirInfo tbody tr:hover td .snarkFileName {
    720716     color: #fff !important;
    721717}
     
    766762}
    767763
    768 .snarkTorrentETA {
    769      font-weight: bold;
    770      font-style: italic;
    771      color: #dd7 !important;
    772      line-height: 120%;
    773 }
    774 
    775764.snarkTorrentInfo img {
    776765     max-height: 16px !important;
     
    811800}
    812801
     802#infohash {
     803     color: #cc0;
     804     -moz-user-select: all;
     805     -webkit-user-select: all;
     806     user-select: all;
     807}
     808
    813809#torrentInfoControl td {
    814810     text-align: right !important;
     
    825821}
    826822
    827 table.SnarkTorrentInfo, table.snarkDirInfo {
     823.SnarkTorrentInfo, .snarkDirInfo {
    828824     margin: 0 !important;
    829825     border: 1px solid #101;
     
    832828}
    833829
    834 table.snarkDirInfo {
     830.snarkDirInfo {
    835831     margin-top: 10px !important;
    836832}
     
    10051001}
    10061002
    1007 div.snarkNewTorrent {
     1003.snarkNewTorrent {
    10081004     font-size: 8pt;
    10091005     margin-top: -1px;
     
    10551051}
    10561052
    1057 .toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"] {
     1053.toggleview, .snarkConfigTitle, .snarknavbar, img, input[type="image"], label {
    10581054     -moz-user-select: none;
    10591055     -webkit-user-select: none;
     
    13671363}
    13681364
     1365input[name="nofilter_commentsName"] {
     1366     max-width: 249px;
     1367}
     1368
     1369input[name="nofilter_commentsName"]:focus::placeholder {
     1370     opacity: 0;
     1371}
     1372
    13691373input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
    13701374     background: #d60;
     
    14001404
    14011405input[type=text], input.r, select {
    1402      min-width: 110px;
     1406     min-width: 120px;
    14031407}
    14041408
     
    16771681}
    16781682
    1679 .configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, 
     1683.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo,
    16801684select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"], a.control {
    16811685     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
     
    17361740}
    17371741
    1738 div.configsection table {
     1742.configsection table {
    17391743     color: #ffb;
    17401744     opacity: 1;
    17411745}
    17421746
    1743 div.configsection a, label.toggleview {
     1747.configsection a, label.toggleview {
    17441748     color: #f60;
    17451749     text-shadow: 0 0 1px #000;
    17461750}
    17471751
    1748 div.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus {
     1752.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus {
    17491753     color: #d2baff;
    17501754     text-decoration: none;
     
    20252029}
    20262030
    2027 tr.dhtDebug th {
     2031.dhtDebug th {
    20282032     white-space: normal;
    20292033     word-break: break-all;
     
    21462150}
    21472151
    2148 .priority {
    2149      font-size: 8pt;
    2150      vertical-align: middle;
    2151      text-align: right !important;
    2152      padding-right: 15px;
    2153      white-space: nowrap;
    2154      width: 1%;
    2155 }
    2156 
    21572152.priority::after {
    21582153     content: "";
     
    22732268}
    22742269
     2270/* Comments Section */
     2271/* TODO: merge with other rules where applicable */
     2272
     2273#snarkCommentSection {
     2274     filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7));
     2275}
     2276
     2277.snarkCommentInfo, .snarkComments {
     2278     margin: 10px 0 0 !important;
     2279     background: #270027 none repeat scroll 0 0;
     2280     border: 1px solid #101;
     2281     filter: none;;
     2282}
     2283
     2284.snarkComments {
     2285     margin-top: -1px !important;
     2286}
     2287
     2288.snarkCommentInfo th {
     2289     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #202, #101);
     2290     padding: 8px 5px 8px 30px !important;
     2291}
     2292
     2293.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
     2294     background: #351933;
     2295     border-bottom: 1px solid #101;
     2296}
     2297
     2298.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
     2299     background: #270027;
     2300     border-bottom: 1px solid #101;
     2301}
     2302
     2303.snarkCommentInfo th {
     2304     padding: 8px 5px;
     2305}
     2306
     2307.snarkCommentInfo td, .snarkComments td {
     2308     padding: 8px 5px;
     2309}
     2310
     2311.snarkCommentInfo td:first-child {
     2312     white-space: nowrap;
     2313}
     2314
     2315.snarkCommentInfo td:first-child {
     2316     font-weight: bold;
     2317}
     2318
     2319.snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
     2320     content: "";
     2321     display: inline-block;
     2322     min-height: 32px;
     2323     vertical-align: middle;
     2324}
     2325
     2326.snarkCommentInfo input.accept {
     2327     float: right;
     2328     margin-right: 5px !important;
     2329}
     2330
     2331.snarkCommentInfo textarea {
     2332     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
     2333     width: 100%;
     2334     min-height: 64px;
     2335     height: 64px;
     2336     resize: vertical;
     2337}
     2338
     2339.commentRating, .commentAuthor {
     2340     width: 1%;
     2341}
     2342
     2343#nameRequired {
     2344     float: right;
     2345     margin-right: 5px;
     2346}
     2347
     2348.commentRating {
     2349     padding-right: 10px !important;
     2350}
     2351
     2352.commentRating img {
     2353     margin: 0;
     2354     padding: 0;
     2355     height: 16px;
     2356     width: 16px;
     2357}
     2358
     2359.commentDate {
     2360     width: 100px;
     2361     background: url(images/clock.png) left center no-repeat;
     2362     padding-left: 20px !important;
     2363}
     2364
     2365.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     2366     min-width: 160px !important;
     2367     width: 160px !important;
     2368     padding-right: 2px;
     2369}
     2370
     2371.snarkCommentInfo td:last-child, .snarkComments td:last-child {
     2372     width: 1% !important;
     2373}
     2374
     2375.snarkComments td {
     2376     white-space: nowrap;
     2377}
     2378
     2379.commentAuthorName {
     2380     background: url(images/author.png) left center no-repeat;
     2381     padding-left: 20px;
     2382}
     2383
     2384.commentText {
     2385     white-space: normal;
     2386     text-align: justify;
     2387     width: 90%;
     2388}
     2389
     2390.commentWrapper {
     2391     border: 1px solid #101;
     2392     margin: 2px 0;
     2393     padding: 8px 10px 8px 26px;
     2394     border-radius: 3px;
     2395     background: #303;
     2396     box-shadow: inset 0 0 0 1px #515, 0 0 1px 0 rgba(0,0,0,0.3);
     2397     background: url(images/comment.png) 6px center no-repeat #303;
     2398     background-blend-mode: luminosity;
     2399}
     2400
     2401.snarkComments select {
     2402     margin-right: 0 !important;
     2403}
     2404
     2405#commentDeleteAction {
     2406     background: linear-gradient(to bottom, #202, #101);
     2407     box-shadow: inset 0 0 0 1px #303;
     2408}
     2409
     2410#commentDeleteAction td {
     2411     padding-right: 6px;
     2412}
     2413
     2414.commentAction, .commentDelete {
     2415     width: 1%;
     2416     white-space: nowrap;
     2417     padding-left: 0;
     2418}
     2419
     2420.addCommentText, .commentText {
     2421     padding-right: 0;
     2422}
     2423
     2424.commentAction input[type="submit"] {
     2425     margin-top: 8px;
     2426     margin-bottom: 8px;
     2427}
     2428
     2429.commentDelete {
     2430     text-align: center;
     2431     padding: 5px 8px 5px 22px !important;
     2432     background: url(images/nuke.png) 2px center no-repeat;
     2433}
     2434
     2435.commentDelete .optbox {
     2436     margin: 0;
     2437}
     2438
     2439#newRating td {
     2440     padding-top: 10px !important;
     2441     padding-bottom: 10px !important;
     2442}
     2443
     2444#newRating td:first-child {
     2445     text-align: center;
     2446}
     2447
     2448#newRating select {
     2449     width: 90%;
     2450}
     2451
     2452#myRating td:empty {
     2453     padding: 0 !important;
     2454     border-top: none !important;
     2455     border-bottom: none !important;
     2456}
     2457
     2458#myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
     2459     min-height: 1px !important;
     2460}
     2461
     2462.commentRating img {
     2463     margin: 0 0 2px;
     2464     padding: 0;
     2465     font-size: 14pt;
     2466     color: #FF7200;
     2467     text-shadow: 0 0 1px #900;
     2468     filter: drop-shadow(0 0 1px rgba(153, 51, 0, 0.6));
     2469}
     2470
     2471.commentsSection {
     2472     background: linear-gradient(to bottom, #545 0%, #434 100%);
     2473     margin: 0 0 10px 0;
     2474     padding: 0 10px 10px;
     2475     border: 1px solid #101;
     2476     color: #ddd;
     2477     border-radius: 4px;
     2478     box-shadow: inset 0 0 3px 0 #101;
     2479     word-wrap: break-word;
     2480     filter: drop-shadow(0 0 1px #515);
     2481}
     2482
     2483/* end Comments section */
     2484
    22752485/* MS Edge fix */
    22762486
     
    22842494
    22852495input[type="checkbox"]:hover, input[type="checkbox"]:focus {
    2286      filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px f60) !important;
     2496     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px #f60) !important;
    22872497}
    22882498
     
    23302540}
    23312541
    2332 table.snarkDirInfo {
     2542.snarkDirInfo {
    23332543     margin-top: 6px !important;
    23342544}
     
    23382548}
    23392549
    2340 .snarkTorrents td:nth-child(2) {
     2550.snarkTorrentStatus {
    23412551     white-space: nowrap;
     2552     font-weight: bold !important;
    23422553}
    23432554
     
    23462557}
    23472558
    2348 .snarkTorrents td:first-child img {
     2559.snarkTorrents thead img {
     2560     max-height: 20px;
     2561}
     2562
     2563.snarkGraphicStatus {
     2564     padding-left: 0;
     2565     padding-right: 0;
     2566}
     2567
     2568td.snarkGraphicStatus img {
    23492569     max-height: 16px;
    23502570}
     
    24102630     text-overflow: ellipsis;
    24112631     white-space: nowrap;
     2632}
     2633
     2634.knownTracker td:nth-child(3) a {
     2635     max-width: 200px;
    24122636}
    24132637
     
    25432767}
    25442768
    2545 body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus {
     2769body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus, .snarkCommentInfo textarea {
    25462770     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
    25472771     font-size: 10pt !important;
     
    25922816.snarkTorrentName a:not(old) {
    25932817     max-width: none;
     2818}
     2819
     2820.snarkTorrentAction {
     2821     padding-right: 3px !important;
    25942822}
    25952823
     
    26062834}
    26072835
     2836.priority {
     2837     font-size: 8pt;
     2838     vertical-align: middle;
     2839     text-align: right !important;
     2840     padding-right: 15px;
     2841     white-space: nowrap;
     2842     width: 1%;
     2843}
     2844
    26082845tt, .snarkMessages, input,  textarea {
    26092846     font-size: 9pt !important;
     
    26732910/* end responsive layout */
    26742911
    2675 /* Comments Section */
    2676 /* TODO: merge with other rules where applicable */
    2677 
    2678 .snarkCommentInfo, .snarkComments {
    2679      margin: 10px 0 0 !important;
    2680      background: #270027 none repeat scroll 0 0;
    2681      border: 1px solid #101;
    2682      filter: drop-shadow(0px 0 1px rgba(16, 8, 16, 0.7));
    2683 }
    2684 
    2685 .snarkCommentInfo th {
    2686      background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #202, #101);
    2687      padding: 8px 5px 8px 30px !important;
    2688 }
    2689 
    2690 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
    2691      background: #351933;
    2692      border-bottom: 1px solid #101;
    2693 }
    2694 
    2695 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
    2696      background: #270027;
    2697      border-bottom: 1px solid #101;
    2698 }
    2699 
    2700 .snarkCommentInfo th {
    2701      padding: 8px 5px;
    2702 }
    2703 
    2704 .snarkCommentInfo td, .snarkComments td {
    2705      padding: 8px 5px;
    2706 }
    2707 
    2708 .snarkCommentInfo td:first-child {
    2709      white-space: nowrap;
    2710 }
    2711 
    2712 .snarkCommentInfo td:first-child {
    2713      font-weight: bold;
    2714 }
    2715 
    2716 .snarkCommentInfo td:first-child::after, .snarkComments td:first-child::after {
    2717      content: "";
    2718      display: inline-block;
    2719      min-height: 32px;
    2720      vertical-align: middle;
    2721 }
    2722 
    2723 .snarkCommentInfo input.accept {
    2724      float: right;
    2725      margin-right: 5px !important;
    2726 }
    2727 
    2728 .snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
    2729      width: 100%;
    2730      min-height: 64px;
    2731      height: 64px;
    2732      resize: vertical;
    2733 }
    2734 
    2735 .snarkComments th {
    2736      text-align: left;
    2737 }
    2738 
    2739 .commentRating, .commentAuthor {
    2740      width: 1%;
    2741 }
    2742 
    2743 #nameRequired {
    2744      float: right;
    2745      margin-right: 5px;
    2746 }
    2747 
    2748 .commentRating {
    2749      padding-right: 10px !important;
    2750 }
    2751 
    2752 .commentRating img {
    2753      margin: 0;
    2754      padding: 0;
    2755      height: 16px;
    2756      width: 16px;
    2757 }
    2758 
    2759 .commentDate {
    2760      width: 100px;
    2761      background: url(images/clock.png) left center no-repeat;
    2762      padding-left: 20px !important;
    2763 }
    2764 
    2765 .snarkCommentInfo td:first-child, .snarkComments td:first-child {
    2766      width: 160px !important;
    2767      padding-right: 2px;
    2768 }
    2769 
    2770 .snarkCommentInfo td:last-child, .snarkComments td:last-child {
    2771      width: 1% !important;
    2772 }
    2773 
    2774 .snarkComments td {
    2775      white-space: nowrap;
    2776 }
    2777 
    2778 .commentAuthorName {
    2779      background: url(images/author.png) left center no-repeat;
    2780      padding-left: 20px;
    2781 }
    2782 
    2783 td.commentText {
    2784      white-space: normal;
    2785      text-align: justify;
    2786      width: 90%;
    2787 }
    2788 
    2789 .commentWrapper {
    2790      border: 1px solid #101;
    2791      margin: 2px 0;
    2792      padding: 8px 10px 8px 26px;
    2793      border-radius: 3px;
    2794      background: #303;
    2795      box-shadow: inset 0 0 0 1px #515, 0 0 1px 0 rgba(0,0,0,0.3);
    2796      background: url(images/comment.png) 6px center no-repeat #303;
    2797      background-blend-mode: luminosity;
    2798 }
    2799 
    2800 .snarkComments select {
    2801      margin-right: 0 !important;
    2802 }
    2803 
    2804 #commentDeleteAction {
    2805      background: linear-gradient(to bottom, #202, #101);
    2806      box-shadow: inset 0 0 0 1px #303;
    2807 }
    2808 
    2809 #commentDeleteAction td {
    2810      padding-right: 6px;
    2811 }
    2812 
    2813 .commentAction, .commentDelete {
    2814      width: 1%;
    2815      white-space: nowrap;
    2816      min-width: 180px !important;
    2817      padding-left: 0;
    2818 }
    2819 
    2820 .addCommentText, .commentText {
    2821      padding-right: 0;
    2822 }
    2823 
    2824 .commentAction input[type="submit"] {
    2825      margin-top: 10px;
    2826      margin-bottom: 10px;
    2827 }
    2828 
    2829 .commentDelete {
    2830      text-align: left;
    2831 }
    2832 
    2833 #newRating td {
    2834      padding-top: 10px !important;
    2835      padding-bottom: 10px !important;
    2836 }
    2837 
    2838 #myRating td:empty {
    2839      padding: 0 !important;
    2840      border-top: none !important;
    2841      border-bottom: none !important;
    2842 }
    2843 
    2844 #myRating td:empty::after { /* hides My Ratings row when Ratings disabled  */
    2845      min-height: 1px !important;
    2846 }
    2847 
    2848 .commentRating img {
    2849      margin: 0 0 4px;
    2850      padding: 0;
    2851      font-size: 14pt;
    2852      color: #FF7200;
    2853      text-shadow: 0 0 1px #900;
    2854      filter: none;
    2855 }
    2856 
    2857 /* end Comments section */
    2858 
  • installer/resources/themes/snark/vanilla/snark.css

    ra9bf1e29 r4da95af  
    8989}
    9090
    91 th a:link, td a:link {
     91.snarkCommentInfo th a:link, td a:link {
    9292     color: #cf0f00;
    9393     text-decoration: none;
     
    404404}
    405405
    406 tr {
    407      opacity: 1;
    408 }
    409 
    410 thead, tfoot {
    411      background: #efefef;
    412      background: linear-gradient(to bottom, #efefef, #cfc7c2);
    413      font-weight: bold;
    414      color: #2f1500;
    415 }
    416 
    417 thead a img, thead img {
    418      opacity: 0.9;
    419      filter: sepia(100%) hue-rotate(340deg);
    420      max-height: 20px;
    421 }
    422 
    423 thead a:hover img, thead a:focus img {
    424      opacity: 1;
    425      mix-blend-mode: normal;
    426      filter: drop-shadow(0 0 1px #f60);
    427 }
    428 
    429406th {
    430407     padding: 4px 2px;
     
    435412}
    436413
     414td {
     415     padding: 2px 4px;
     416     color: #2f1500 !important;
     417     vertical-align: middle;
     418}
     419
     420thead, tfoot {
     421     background: #efefef;
     422     background: linear-gradient(to bottom, #efefef, #cfc7c2);
     423     font-weight: bold;
     424     color: #2f1500;
     425}
     426
     427thead a img, thead img {
     428     opacity: 0.9;
     429     filter: sepia(100%) hue-rotate(340deg);
     430     max-height: 20px;
     431}
     432
     433thead a:hover img, thead a:focus img {
     434     opacity: 1;
     435     mix-blend-mode: normal;
     436     filter: drop-shadow(0 0 1px #f60);
     437}
     438
    437439th br {
    438440     display: none;
     
    452454     vertical-align: middle;
    453455     font-weight: bold;
     456     color: #2f1500 !important;
    454457}
    455458
     
    478481     padding: 4px 0 4px 4px;
    479482}
     483
     484/* main torrents listing */
    480485
    481486.snarkTorrents {
     
    508513}
    509514
    510 .snarkTorrents tfoot th::first-line, .snarkTorrents tfoot th:nth-child(n+7) {
     515.snarkTorrents tfoot tr:first-child {
     516     background: linear-gradient(to bottom, #efefef, #cfc7c2);
     517}
     518
     519.snarkTorrents tfoot tr:first-child th {
    511520     font-weight: bold !important;
     521}
     522
     523.snarkTorrents tfoot tr:first-child th::after {
     524     content: "";
     525     display: inline-block;
     526     min-height: 24px;
     527     vertical-align: middle;
    512528}
    513529
     
    520536}
    521537
    522 .snarkTorrents thead th:first-child {
     538.snarkTorrents tfoot tr:first-child th {
     539     vertical-align: middle;
     540}
     541
     542.snarkTorrents thead th:nth-child(3) {
     543     text-align: right;
     544     padding-right: 0;
     545}
     546
     547.snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] {
     548     text-align: left;
     549}
     550
     551.snarkTorrents td[colspan="10"] {
     552     white-space: normal;
     553}
     554
     555.snarkGraphicStatus, .snarkTorrentStatus {
     556     padding: 2px;
     557     white-space: nowrap;
     558     width: 1%;
     559}
     560
     561.snarkGraphicStatus {
    523562     text-align: center !important;
    524 }
    525 
    526 .snarkTorrents thead th:nth-child(3) {
    527      padding: 4px 4px 4px 0;
    528      text-align: right;
    529 }
    530 
    531 .snarkTorrents th:nth-child(n+5) {
    532      text-align: right;
    533 }
    534 
    535 .snarkTorrents th:nth-child(6), .snarkTorrents th:last-child {
    536      text-align: center;
    537 }
    538 
    539 .snarkTorrents th:first-child, .snarkTorrents td:first-child {
    540563     width: 1%;
    541564     white-space: nowrap;
    542565}
    543566
    544 .snarkTorrents th:last-child, .snarkTorrents td:last-child {
    545      width: 1%;
    546      white-space: nowrap;
    547 }
    548 
    549 .snarkTorrents tfoot {
    550      vertical-align: top;
    551 }
    552 
    553 .snarkTorrents td:first-child, .snarkTorrents td:nth-child(2) {
    554      padding: 2px 0 !important;
    555 }
    556 
    557 .snarkTorrents td:nth-child(3), .snarkTorrents td:nth-child(4) {
    558      padding: 2px 0 !important;
    559      width: 16px !important;
    560 }
    561 
    562 .snarkTorrents td:nth-child(3) {
    563      padding: 0 3px !important;
    564 }
    565 
    566 .snarkTorrents td:nth-child(4) {
    567      font-weight: bold;
    568 }
    569 
    570 .snarkTorrents td:nth-child(7), .peerinfo .snarkTorrentStatus {
    571      font-weight: bold !important;
    572      white-space: nowrap !important;
    573 }
    574 
    575 td {
    576      padding: 2px 4px;
    577      color: #2f1500 !important;
    578      opacity: 1;
    579      font-size: 8pt;
     567.snarkGraphicStatus::after {
     568     content: "";
     569     display: inline-block;
     570     min-height: 20px !important;
    580571     vertical-align: middle;
    581572}
    582573
    583 td:first-child {
    584      text-align: right;
    585      font-size: 8pt;
    586 }
    587 
    588 .center {
     574th.snarkTorrentStatus {
    589575     text-align: center !important;
     576}
     577
     578.snarkTorrentStatus {
     579     padding-right: 5px !important;
     580     text-align: left;
     581     padding-left: 0;
    590582}
    591583
     
    595587}
    596588
    597 .snarkTorrentName img {
    598      padding-bottom: 2px;
    599      text-align: left;
     589.snarkTrackerDetails, .snarkTorrentDetails {
     590     padding: 2px 0 !important;
     591     width: 16px !important;
     592}
     593
     594.snarkTrackerDetails {
     595     padding: 0 3px !important;
     596}
     597
     598.snarkTorrentDetails {
     599     font-weight: bold;
     600}
     601
     602.snarkTorrentETA, .snarkTorrentUploaded, .snarkTorrentRateDown, .snarkTorrentRateUp {
     603     width: 5%;
     604     min-width: 40px;
     605     white-space: nowrap;
     606}
     607
     608.snarkTorrentETA {
     609     font-weight: bold;
     610     font-style: italic;
     611     color: #505 !important;
     612     line-height: 120%;
     613}
     614
     615.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
     616     font-weight: bold;
     617     padding: 0 5px;
     618}
     619
     620.snarkTorrentDownloaded, .peerinfo td:nth-child(4) {
     621     text-align: right !important;
     622     padding: 2px;
    600623     vertical-align: middle;
    601624}
    602625
     626.snarkTorrentRateDown, .snarkTorrentDownloaded {
     627     color: #439 !important;
     628}
     629
     630.snarkTorrentUploaded, .snarkTorrentRateUp {
     631     color: #626 !important;
     632}
     633
    603634.snarkTorrentAction {
    604      padding: 1px 1px 1px 1px !important;
     635     padding: 1px 2px 1px 1px !important;
    605636     margin: 0 !important;
    606637     text-align: center;
    607638     width: 1%;
    608639     white-space: nowrap;
    609 }
    610 
    611 @media screen and (-webkit-min-device-pixel-ratio:0) {
    612 .snarkTorrentAction {
    613      width: 48px !important;
    614 }
    615 }
    616 
    617 /* MS Edge fix */
    618 _:-ms-lang(x), .snarkTorrentAction {
    619      width: 72px !important;
    620640}
    621641
     
    633653}
    634654
    635 .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  {
     655.snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover,
     656.snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus  {
    636657     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
    637658     border: 1px solid #930 !important;
     
    646667}
    647668
    648 .snarkTorrentEven {
    649      font-size: 8pt;
    650      background: #dfd6d1;
    651 }
    652 
    653 .snarkTorrentNoneLoaded {
    654      background: #5f4e41;
    655      font-size: 8.5pt;
    656      font-weight: bold;
    657      text-align: center !important;
    658      color: #bbb !important;
    659 }
    660 
    661 .snarkTorrentStatus {
    662      padding: 2px 0;
    663 }
    664 
    665 .snarkTorrentStatus:first-child {
    666      text-align: left !important;
    667      padding-left: 0;
    668      min-width: 48px;
    669      font-weight: bold;
    670      color: #402 !important;
    671      font-size: 8pt;
    672 }
    673 
    674 .snarkTorrentStatus:first-child img {
    675      margin-right: 12px !important;
    676      margin-left: 6px !important;
    677 }
    678 
    679 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .peerinfo .snarkTorrentStatus {
    680      font-size: 8pt;
    681      font-weight: bold;
    682      padding: 0 3px;
    683 /*     line-height: 120% !important;*/
    684 }
    685 
    686 .snarkTorrentDownloaded {
    687      color: #439 !important;
    688      text-align: center !important;
    689      padding: 2px;
    690      vertical-align: middle;
    691 }
    692 
    693 .snarkTorrentUploaded {
    694      color: #626 !important;
    695 }
    696 
    697 .snarkTorrentRateUp {
    698      color: #626 !important;
    699 }
    700 
    701 .snarkTorrentRateDown {
    702      color: #439 !important;
    703 }
    704 
    705 .snarkTorrentOdd {
    706      background: #efe6e0;
    707      font-size: 8pt;
    708 }
    709 
    710 .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
    711      border-top: 1px outset #fff5ef !important;
    712      border-bottom: 1px outset #efe8e0 !important;
    713 }
    714 
    715 _:-ms-lang(x), .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
    716      border-top: 1px solid #fff5ef !important;
    717      border-bottom: 1px solid #efe8e0 !important;
    718 }
    719 
    720 .snarkTorrentOdd:last-child td, .snarkTorrentEven:last-child td {
    721      border-bottom: none !important;
    722 }
    723 
    724 table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
    725      background: #f9efcf !important;
    726      background: linear-gradient(to right, rgba(119, 0, 0, 0.7) 3px, #f9efcf 3px) !important;
    727 }
    728 
    729 tr:hover .percentBarText {
    730      opacity: 1;
    731 }
    732 
    733 @media screen and (-webkit-min-device-pixel-ratio:0) {
    734 table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
    735      background: #f9efcf !important;
    736 }
    737 }
    738 
    739 _:-ms-lang(x), table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
    740      background: #f9efcf !important;
    741 }
    742 
    743 .snarkDirInfo tr:hover .snarkFileStatus img {
    744      mix-blend-mode: normal;
    745 }
    746 
    747 .snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
    748      background: linear-gradient(to right, #998e88 3px, #E8DFDA 3px);
    749 }
    750 
    751 .snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
    752      background: linear-gradient(to right, #72665f 3px, #E0D9D5 3px);
    753 }
    754 
    755 @media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome fix - gradient otherwise applied to each td */
    756 .snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
    757      background: #E8DFDA;
    758 }
    759 
    760 .snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
    761      background: #E0D9D5;
    762 }
    763 }
    764 
    765 .snarkTorrentEven + .snarkTorrentEven:nth-child(even) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) td, .snarkTorrentEven + .snarkTorrentEven:nth-child(odd) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) td {
    766      padding: 3px 3px 3px 0 !important;
    767 }
    768 
    769 .snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"]  {
    770      text-align: left;
    771 }
    772 
    773 .snarkTorrents td[colspan="10"] {
    774      font-size: 8pt;
    775      white-space: normal;
     669.snarkTorrents th:empty + th:empty, .snarkTorrents td:empty + td:empty, .snarkTorrentAction:empty {
     670     width: 0 !important;
    776671}
    777672
     
    790685}
    791686
     687.snarkTorrentNoneLoaded {
     688     background: #5f4e41;
     689     font-weight: bold;
     690     text-align: center !important;
     691     color: #bbb !important;
     692}
     693
     694/* end main torrents listing */
     695
     696.snarkTorrentEven {
     697     background: #dfd6d1;
     698}
     699
     700.snarkTorrentOdd {
     701     background: #efe6e0;
     702}
     703
     704.snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
     705     border-top: 1px outset #fff5ef !important;
     706     border-bottom: 1px outset #efe8e0 !important;
     707}
     708
     709_:-ms-lang(x), .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
     710     border-top: 1px solid #fff5ef !important;
     711     border-bottom: 1px solid #efe8e0 !important;
     712}
     713
     714.snarkTorrentOdd:last-child td, .snarkTorrentEven:last-child td {
     715     border-bottom: none !important;
     716}
     717
     718.snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
     719     background: #f9efcf !important;
     720     background: linear-gradient(to right, rgba(119, 0, 0, 0.7) 3px, #f9efcf 3px) !important;
     721}
     722
     723tr:hover .percentBarText {
     724     opacity: 1;
     725}
     726
     727@media screen and (-webkit-min-device-pixel-ratio:0) {
     728.snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
     729     background: #f9efcf !important;
     730}
     731}
     732
     733_:-ms-lang(x), .snarkTorrents tbody tr:hover, .snarkDirInfo tbody tr:hover {
     734     background: #f9efcf !important;
     735}
     736
     737.snarkDirInfo tr:hover .snarkFileStatus img {
     738     mix-blend-mode: normal;
     739}
     740
     741.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
     742     background: linear-gradient(to right, #998e88 3px, #E8DFDA 3px);
     743}
     744
     745.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
     746     background: linear-gradient(to right, #72665f 3px, #E0D9D5 3px);
     747}
     748
     749@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome fix - gradient otherwise applied to each td */
     750.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
     751     background: #E8DFDA;
     752}
     753
     754.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
     755     background: #E0D9D5;
     756}
     757}
     758
     759.peerinfo td[colspan="4"], .debuginfo td[colspan="10"] {
     760     padding-left: 0;
     761}
     762
    792763.snarkFileIcon {
    793764     width: 16px;
     
    803774}
    804775
    805 td.snarkFileIcon:first-child {
     776.snarkFileIcon:first-child {
    806777     text-align: center;
    807778}
     
    832803}
    833804
    834 .snarkTorrentETA {
    835      font-weight: bold;
    836      font-style: italic;
    837      color: #505 !important;
    838      line-height: 120%;
    839 }
    840 
    841805.snarkTorrentInfo img {
    842806     max-height: 16px !important;
     
    882846}
    883847
     848#infohash {
     849     color: #050;
     850     -moz-user-select: all;
     851     -webkit-user-select: all;
     852     user-select: all;
     853}
     854
    884855#torrentInfoControl {
    885856     border-top: 1px solid #6f533e;
     
    925896}
    926897
     898.snarkDirInfo td:first-child::before {
     899     content: "";
     900     display: inline-block;
     901     min-height: 22px;
     902     vertical-align: middle !important;
     903}
     904
    927905.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
    928906     display: inline-block;
     
    963941/* download bars */
    964942
    965 .snarkTorrents th:nth-child(6) {
    966      text-align: right;
    967 }
    968 
    969943.snarkTorrentDownloaded {
    970944     width: 110px !important;
     
    975949     float: left;
    976950     margin: 1px 10px 0 7px;
     951}
     952
     953.snarkDirInfo .snarkFileStatus img[src$="tick.png"] {
     954     margin-top: 0;
    977955}
    978956
     
    994972     opacity: 1;
    995973     margin: 0;
     974     display: inline-block;
    996975}
    997976
     
    10311010}
    10321011
     1012.peerinfo .percentBarInner {
     1013     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%) !important;
     1014}
     1015
    10331016.percentBarText, .percentBarOuter {
    10341017     text-align: center;
     
    10681051.unchoked {
    10691052     color: #008000 !important;
     1053}
     1054
     1055.choked, .unchoked {
     1056     font-style: italic;
    10701057}
    10711058
     
    13201307     color: #2f1500;
    13211308     margin: 2px 4px;
    1322      font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
     1309     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
    13231310}
    13241311
    13251312input.r {
    13261313     text-align: right;
    1327      min-width: 100px;
    13281314     background: #efe6e0;
     1315}
     1316
     1317input.r, input[type="text"], select {
     1318     min-width: 120px;
     1319}
     1320
     1321input[name="nofilter_commentsName"] {
     1322     width: 250px;
    13291323}
    13301324
     
    15011495     background: #efe6e0 url(images/dropdown.png) right center no-repeat !important;
    15021496     color: #2f1500;
    1503      font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
     1497     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
    15041498     font-weight: bold;
    15051499     padding: 5px 14px 5px 5px;
     
    15071501     border: 1px solid #2f1500;
    15081502     margin: 2px 0 2px 4px;
    1509      min-width: 100px;
    15101503     -moz-appearance: none;
    15111504     -webkit-appearance: none;
     
    15531546     font-size: 8pt;
    15541547     margin-left: 4px;
    1555      font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
     1548     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
    15561549     width: 70%;
    15571550}
     
    16771670     width: 120px;
    16781671     font-weight: bold;
     1672     text-align: right;
    16791673}
    16801674
     
    20302024#totals {
    20312025     display: inline-block;
    2032      margin: 2px 0 2px 6px;
    2033      font-weight: bold;
     2026     margin: 3px 0 3px 6px;
     2027     font-weight: bold;
     2028}
     2029
     2030#totals span, #ourDest {
     2031     white-space: nowrap;
    20342032}
    20352033
     
    21262124     min-width: 240px !important;
    21272125     font-weight: bold;
     2126     text-align: right;
    21282127}
    21292128
     
    21932192}
    21942193
    2195 /* MS Edge fix */
    2196 _:-ms-lang(x), * {
    2197      filter: none !important;
    2198 }
    2199 
    2200 _:-ms-lang(x), input[type="radio"], input[type="checkbox"] {
    2201      filter: sepia(50%) invert(80%) hue-rotate(150deg) !important;
    2202 }
    2203 
    2204 /* end Edge fix */
    2205 
    2206 /* responsive layout */
    2207 
    2208 @media screen and (max-width: 1000px) {
    2209 .snarkTorrents td:nth-child(2) {
    2210      white-space: nowrap;
    2211      font-weight: bold;
    2212 }
    2213 
    2214 .snarkTorrents td[colspan="10"] {
    2215      white-space: normal;
    2216 }
    2217 
    2218 .snarkTorrentStatus b {
    2219      display: none;
    2220 }
    2221 
    2222 b.alwaysShow {
    2223      display: inline;
    2224 }
    2225 
    2226 .lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover,  label.toggleview, .snarkConfigTitle a {
    2227      font-size: 11pt !important;
    2228      max-width: 220px !important
    2229 }
    2230 
    2231 .configsectionpanel .snarkConfigTitle {
    2232      font-size: 10.5pt !important;
    2233 }
    2234 
    2235 .snarkTorrents td:first-child img {
    2236      max-height: 16px;
    2237 }
    2238 
    2239 .from, .to {
    2240      font-size: 11pt !important;
    2241 }
    2242 
    2243 .snarkTorrentOdd td, .snarkTorrentEven td {
    2244      padding-top: 3px;
    2245      padding-bottom: 3px;
    2246 }
    2247 
    2248 .percentBarOuter, .percentBarText, .snarkTorrentDownloaded {
    2249      width: 100px !important;
    2250 }
    2251 
    2252 .snarkTorrentDownloaded .percentBarInner {
    2253      background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 33px, rgba(255, 255, 0, 0.5) 66px, rgba(0, 255, 0, 0.5));
    2254 }
    2255 
    2256 .snarkDirInfo .percentBarInner {
    2257      background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 0%, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9) 100%), linear-gradient(to right, rgba(255, 100, 0, 0.5) 23px, rgba(255, 255, 0, 0.5) 47px, rgba(0, 255, 0, 0.5));
    2258 }
    2259 
    2260 .snarkDirInfo .percentBarText, .snarkDirInfo .percentBarOuter, .peerinfo .percentBarOuter, .peerinfo .percentBarText {
    2261      width: 70px !important;
    2262 }
    2263 
    2264 .snarkFileStatus {
    2265      width: 120px;
    2266 }
    2267 
    2268 .snarkTorrents tt {
    2269      background: none;
    2270      color: #030;
    2271 }
    2272 
    2273 .snarkDirInfo thead img {
    2274      max-height: 18px;
    2275 }
    2276 
    2277 .knownTracker a, #trackerselect td a {
    2278      display: inline-block;
    2279      overflow: hidden;
    2280      text-overflow: ellipsis;
    2281      white-space: nowrap;
    2282      max-width: 200px !important;
    2283 }
    2284 
    2285 #trackerselect td a {
    2286      max-width: 350px !important;
    2287 }
    2288 }
    2289 
    2290 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
    2291 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
    2292 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
    2293      font-size: 12pt !important;
    2294      letter-spacing: 0.1em !important;
    2295 }
    2296 }
    2297 
    2298 @media screen and (max-width: 1200px) {
    2299 .snarknavbar {
    2300      width: calc(100% - 22px);
    2301      transition: ease width 0.5s 0.5s;
    2302 }
    2303 
    2304 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
    2305      max-height: 9px;
    2306      margin-top: 2px;
    2307      margin-bottom: 2px;
    2308 }
    2309 
    2310 .snarkRefresh:nth-child(n+2) {
    2311      padding: 4px 8px 4px 24px !important;
    2312      background-size: 14px auto, 100% 100%, 100% 100% !important;
    2313      background-position: 8px center, center center, center center !important;
    2314 }
    2315 
    2316 .snarkRefresh:first-child {
    2317      padding: 4px 8px 4px 26px !important;
    2318      background-size: 16px auto, 100% 100%, 100% 100% !important;
    2319      background-position: 9px center, center center, center center !important;
    2320 }
    2321 
    2322 _:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
    2323      padding-top: 3px !important;
    2324 }
    2325 
    2326 .peerinfo td, .debuginfo td {
    2327      padding-top: 0 !important;
    2328      padding-bottom: 0 !important;
    2329 }
    2330 
    2331 .snarkTorrentETA {
    2332      padding-right: 10px !important;
    2333 }
    2334 
    2335 .dirInfoComplete {
    2336      display: none;
    2337 }
    2338 
    2339 #pagenav img {
    2340      height: 14px;
    2341 }
    2342 
    2343 .snarkTorrentDownloaded .percentBarOuter {
    2344      margin-left: 0;
    2345 }
    2346 
    2347 .snarkTorrents tfoot tr:first-child th {
    2348      padding-top: 2px;
    2349      padding-bottom: 2px;
    2350      line-height: 120%;
    2351 }
    2352 }
    2353 
    2354 @media screen and (max-width: 1400px) {
    2355 #dhtDebugInner {
    2356      margin-top: -21px !important;
    2357      padding-top: 15px;
    2358 }
    2359 }
    2360 
    2361 @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
    2362 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
    2363 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
    2364      font-size: 11pt !important;
    2365      letter-spacing: 0.1em !important;
    2366 }
    2367 }
    2368 
    2369 @media screen and (min-width: 1000px) {
    2370 body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button {
    2371      font-size: 9pt !important;
    2372 }
    2373 
    2374 .snarkRefresh:link {
    2375       font-size: 11.5pt;
    2376 }
    2377 
    2378 .snarkTorrentOdd td, .snarkTorrentEven td {
    2379      padding-top: 3px !important;
    2380      padding-bottom: 3px !important;
    2381 }
    2382 
    2383 .snarkTorrents tfoot tr:first-child th {
    2384      padding-top: 4px;
    2385      padding-bottom: 4px;
    2386      line-height: 150%;
    2387 }
    2388 
    2389 .peerinfo tt {
    2390      display: inline-block;
    2391      margin: 0 3px;
    2392 }
    2393 
    2394 .snarkTorrentName {
    2395      padding-left: 1px;
    2396 }
    2397 
    2398 .snarkTorrentStatus {
    2399      white-space: nowrap;
    2400 }
    2401 
    2402 .snarkTorrentStatus b {
    2403      margin-right: 3px;
    2404 }
    2405 }
    2406 
    2407 @media screen and (min-width: 1200px) {
    2408 .snarkTorrentOdd td, .snarkTorrentEven td {
    2409      padding-top: 4px !important;
    2410      padding-bottom: 4px !important;
    2411 }
    2412 
    2413 .percentDownloaded {
    2414      pointer-events: none; /* hide tooltip */
    2415 }
    2416 
    2417 .snarkTorrentRateUp, .snarkTorrents th:nth-child(9), .snarkTorrents tfoot th:nth-last-child(2), .snarkTorrents .peerinfo td:nth-last-child(2)  {
    2418      padding-right: 15px !important;
    2419 }
    2420 
    2421 thead a img, thead img {
    2422      max-height: 21px;
    2423 }
    2424 }
    2425 
    2426 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) {
    2427 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
    2428 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
    2429      font-size: 13pt !important;
    2430      letter-spacing: 0.1em !important;
    2431 }
    2432 }
    2433 
    2434 @media screen and (min-width: 1400px) {
    2435 body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button, code, #pagenav {
    2436      font-size: 10pt !important;
    2437 }
    2438 
    2439 tt, .snarkTorrents tt, .snarkMessages, textarea {
    2440      font-size: 9pt !important;
    2441 }
    2442 
    2443 .snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th,
    2444 .configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"] {
    2445      font-size: 10pt !important;
    2446 }
    2447 
    2448 .snarkRefresh:link {
    2449       font-size: 13pt;
    2450 }
    2451 
    2452 .snarkRefresh:link:first-child {
    2453      padding-left: 30px !important;
    2454 }
    2455 
    2456 select {
    2457      padding-top: 4px;
    2458      padding-bottom: 4px;
    2459 }
    2460 
    2461 .snarkTorrentDownloaded {
    2462      white-space: nowrap;
    2463 }
    2464 
    2465 thead a img, thead img {
    2466      max-height: 22px;
    2467 }
    2468 
    2469 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
    2470      padding: 4px !important;
    2471      margin: 2px !important;
    2472 }
    2473 
    2474 .snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle,
    2475 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, label.toggleview {
    2476      min-width: 240px !important;
    2477      font-size: 12pt !important;
    2478 }
    2479 
    2480 .mainsection td, .peerinfo td {
    2481      padding-top: 2px !important;
    2482      padding-bottom: 2px !important;
    2483 }
    2484 
    2485 .peerinfo tt {
    2486      margin: 1px 4px;
    2487 }
    2488 
    2489 .snarkTorrentStatus b, .dirInfoComplete {
    2490      margin-right: 4px;
    2491 }
    2492 
    2493 .snarkDirInfo td:nth-child(n+2) {
    2494      padding-left: 10px;
    2495      padding-right: 10px;
    2496 }
    2497 
    2498 tr#torrentInfoStats td {
    2499      padding-top: 5px !important;
    2500      padding-bottom: 5px !important;
    2501 }
    2502 
    2503 .debuginfo td::after {
    2504      content: "";
    2505      display: inline-block;
    2506      min-height: 18px;
    2507      vertical-align: middle;
    2508 }
    2509 
    2510 .debugConnection {
    2511      margin: 0 4px;
    2512      padding: 2px 3px;
    2513      font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
    2514      font-weight: bold;
    2515      background: #967158;
    2516      color: #fff;
    2517      border-radius: 2px;
    2518      display: inline-block;
    2519      vertical-align: middle;
    2520 }
    2521 }
    2522 
    2523 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
    2524 .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
    2525 .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
    2526      font-size: 14pt !important;
    2527      letter-spacing: 0.1em !important;
    2528 }
    2529 }
    2530 
    2531 /* end responsive layout */
    2532 
    25332194/* Comments Section */
    2534 /* TODO: merge with other rules where applicable */
     2195
     2196#snarkCommentSection {
     2197     filter: drop-shadow(0 0 2px rgba(77, 69, 62, 0.5)) !important;
     2198}
    25352199
    25362200.snarkCommentInfo, .snarkComments {
    25372201     margin: 10px 0 0 !important;
    25382202     border: 1px solid #6f533e;
    2539      box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);
    2540      border-collapse: separate;
    2541 }
    2542 
    2543 .snarkCommentInfo, .snarkComments {
    25442203     border-top: none;
    25452204     border-bottom: none;
     2205/*     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);*/
     2206     border-collapse: separate;
     2207}
     2208
     2209.snarkComments {
     2210     margin-top: 0 !important;
     2211}
     2212
     2213.snarkCommentInfo td:first-child, .snarkComments td:first-child {
     2214     text-align: right;
    25462215}
    25472216
     
    25502219}
    25512220
    2552 .snarkCommentInfo tr:first-child th, .snarkComments tr:first-child td {
     2221.snarkCommentInfo tr:first-child th {
    25532222     border-top: 1px solid #6f533e;
     2223}
     2224
     2225.snarkComments tr:first-child td {
     2226     border-top: 1px solid #6f533e;
     2227     border-top: 1px outset #fff5ef;
    25542228}
    25552229
     
    25682242}
    25692243
    2570 .snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(even) {
     2244.snarkCommentInfo tr:nth-child(even), .snarkComments tr:nth-child(odd) {
    25712245     background: #dfd6d1;
    25722246}
    25732247
    2574 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(odd) {
     2248.snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
    25752249     background: #efe6e0;
    25762250}
     
    26062280}
    26072281
    2608 .snarkCommentInfo textarea { /* remember to set 10pt @ > 1400px */
     2282.snarkCommentInfo textarea {
    26092283     width: 100%;
    26102284     min-height: 64px;
     
    26352309     padding: 0;
    26362310     font-size: 14pt;
    2637      color: #FF7200;
     2311     color: #ff7200;
    26382312     text-shadow: 0 0 1px #900;
    2639      filter: none;
     2313     filter: drop-shadow(0 0 1px rgba(153, 0, 0, 0.4));
    26402314     width: 16px;
    26412315     height: 16px;
     
    26662340}
    26672341
    2668 td.commentText {
     2342.commentText {
    26692343     white-space: normal;
    26702344     text-align: justify;
     
    27052379     width: 1%;
    27062380     white-space: nowrap;
    2707      min-width: 180px;
    27082381}
    27092382
    27102383.commentAction input[type="submit"] {
    2711      margin-top: 10px;
    2712      margin-bottom: 10px;
     2384     margin-top: 5px;
     2385     margin-bottom: 5px;
    27132386}
    27142387
    27152388.commentDelete {
     2389     background: url(../ubergine/images/nuke.png) 6px center no-repeat;