Changeset 1c6ca501 for installer

Timestamp:

Oct 25, 2017 9:47:34 AM (3 years ago)

Author:

str4d <str4d@…>

Branches:

master

Children:

e44fb48f

Parents:

cdd89df

Message:

Theme updates

Console:

• light:
  • Lighten/tint buttons and dropdowns to better blend with reworked theme, vary text color for different button states
  • Increase vertical spacing for status/buttons in news section
  • Fix minor rendering issue with h1's (remove bottom border-radius)
  • Fix some mismatched heading coloring issues
  • Fix alignment issue on /configservice in Arabic/Chinese? (ticket #2024)
  • Ensure spacing of sidebar elements is consistent in Chinese
• dark: Overhaul theme
• classic: Add fallback CSS to ensure browsers without CSS3 support can display icons on buttons (tested with Netsurf)

Proxy: Remove truncation of URLs in the error messages and handle with CSS to

avoid UI breakage

I2PSnark

• Add button hoverstate for tracker details, torrent details and file icons
• light
  • Sync buttons in embedded mode with console theme
  • Fix non-functioning message log close icon
• dark: Overhaul theme and sync with console theme in embedded mode
• classic: refresh CSS

Susimail:

• Overhaul dark theme
• Sync theme to console theme by default, override if user sets theme (unless universal themeing is enabled)

Location:

installer/resources/themes

Files:

• console/classic/console.css (modified) (71 diffs)
• console/classic/i2ptunnel.css (modified) (2 diffs)
• console/dark/console.css (modified) (36 diffs)
• console/dark/console_big.css (modified) (1 diff)
• console/dark/i2ptunnel.css (modified) (9 diffs)
• console/light/console.css (modified) (66 diffs)
• console/light/console_ar.css (modified) (11 diffs)
• console/light/console_big.css (modified) (2 diffs)
• console/light/i2ptunnel.css (modified) (9 diffs)
• console/light/mobile.css (modified) (3 diffs)
• console/midnight/console.css (modified) (22 diffs)
• console/midnight/i2ptunnel.css (modified) (2 diffs)
• snark/classic/nocollapse.css (modified) (1 diff)
• snark/classic/snark.css (modified) (70 diffs)
• snark/dark/snark.css (modified) (44 diffs)
• snark/light/snark.css (modified) (27 diffs)
• snark/midnight/snark.css (modified) (13 diffs)
• snark/ubergine/snark.css (modified) (9 diffs)
• snark/vanilla/nocollapse.css (modified) (1 diff)
• snark/vanilla/snark.css (modified) (32 diffs)
• susidns/dark/susidns.css (modified) (14 diffs)
• susidns/light/susidns.css (modified) (26 diffs)
• susimail/dark/susimail.css (modified) (12 diffs)
• susimail/light/susimail.css (modified) (38 diffs)

installer/resources/themes/console/classic/console.css

@@ -132 +132 @@
 
 .warning a:visited {
-     color: #f90 !important;
-}
-
-.warning a:hover {
+     color: #f40 !important;
+}
+
+.warning a:hover, .warning a:focus, .warning a:visited:focus {
      color: #d30 !important;
 }
@@ -407 +407 @@
 }
 
+/* siderbar logo */
+
+.routersummary div[style="height: 36px;"] {
+     height: 32px !important;
+}
+
 .routersummary img[src$="i2plogo.png"] {
-    margin-top: 3px;
-     margin-left: 0;
-     width: 185px;
+     width: 190px;
      height: auto;
      box-shadow: 0 0 1px 1px rgba(180,180,180,0.7);
@@ -417 +421 @@
      user-select: none;
 }
+
+.routersummary a img:first-child {
+     opacity: 0.8;
+     border: none;
+}
+
+.routersummary a img:first-child:hover, .routersummary a img:first-child:active {
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #f60);
+     box-shadow: none;
+}
+
+.routersummary a[href="/"], .routersummary a[href="/console"] {
+     outline: none !important;
+}
+
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     filter: drop-shadow(0 0 1px #f60) saturate(200%);
+}
+
+/* end siderbar logo */
 
 .routersummary a {
@@ -668 +693 @@
 }
 
+.sb_notice a {
+     vertical-align: baseline;
+     padding: 0;
+}
+
 #sb_warning + .sb_notice {
      margin-top: 10px;
@@ -677 +707 @@
 
 .routersummary form {
-     margin: -2px 0;
+     margin: -2px -2px -3px;
+}
+
+#sb_warning + hr {
+    opacity: 0;
+}
+
+#sb_warning + hr + form {
+     margin-top: -1px;
+}
+
+#sb_warning + p:empty + form {
+     margin-top: 10px;
+     margin-bottom: -3px;
 }
 
@@ -753 +796 @@
 .routersummary a:hover {
      color: #f60;
-}
-
-.routersummary a img:first-child {
-     opacity: 0.8;
-     border: none;
-}
-
-.routersummary a img:first-child:hover, .routersummary a img:first-child:active {
-     opacity: 1;
-     filter: drop-shadow(0 0 1px #89f);
-     box-shadow: none;
-}
-
-.routersummary a[href="/"], .routersummary a[href="/console"] {
-     outline: none !important;
-}
-
-.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
-     filter: drop-shadow(0 0 1px #f60) saturate(200%);
 }
 
@@ -1281 +1305 @@
      -webkit-appearance: none;
      appearance: none;
-     background: url(images/dropdown.png) right center no-repeat #fff;
+     background: url(images/dropdown.png) right center no-repeat #eee;
      background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
      margin: 3px 5px;
@@ -1306 +1330 @@
 
 select:hover, select:active {
+     background: #ddd url(images/dropdown_hover.png) right center no-repeat !important;
      background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
 }
 
 select:focus {
+     background: #fff url(images/dropdown_hover.png) right center no-repeat !important;
      background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      box-shadow: 0 0 0 1px #89f;
@@ -1401 +1427 @@
      padding: 4px;
      color: #333;
+     background-color: #fefefe;
 }
 
@@ -1415 +1442 @@
 
 button, input, select {
+     background-color: #eee;
      font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
      color: #333;
@@ -1420 +1448 @@
 
 button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
-     background: #fff;
+     background-color: #ddd;
      background: linear-gradient(to bottom, #ddd, #fff);
 }
 
 button:active, input[type="submit"]:active, input[type="reset"]:active {
-     background: #ddd;
+     background-color: #fff;
 }
 
@@ -1511 +1539 @@
 
 button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     background: #ddd;
      background: linear-gradient(to bottom, #ddd, #fff);
      border: 1px solid #89f;
@@ -1520 +1549 @@
      border: 1px solid #999;
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555;
+     background-color: #ddd;
      background-blend-mode: luminosity;
      color: #555;
@@ -1525 +1555 @@
 
 input.accept, button.accept {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1531 +1562 @@
 input.accept:hover, button.accept:hover,
 input.accept:focus, button.accept:focus {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.accept[value^="Unban"], button.accept[value^="Unban"] {
+     background: #eee url(/themes/console/images/buttons/unban.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1541 +1574 @@
 input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover,
 input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus {
+     background: #fff url(/themes/console/images/buttons/unban.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.accept[value^="Create"], button.accept[value^="Create"] {
+     background: #eee url(/themes/console/images/buttons/create.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1551 +1586 @@
 input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover,
 input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus {
+     background: #fff url(/themes/console/images/buttons/create.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.accept[value^="Filter"], button.accept[value^="Filter"] {
+     background: #eee url(/themes/console/images/buttons/filter.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1561 +1598 @@
 input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover,
 input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
+     background: #fff url(/themes/console/images/buttons/filter.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.add, button.add {
+     background: #eee url(/themes/console/images/buttons/add.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1571 +1610 @@
 input.add:hover, button.add:hover,
 input.add:focus, button.add:focus {
+     background: #fff url(/themes/console/images/buttons/add.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.add[value^="Adjust"], button.add[value^="Adjust"] {
+     background: #eee url(/themes/console/images/buttons/edit2.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1581 +1622 @@
 input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover,
 input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
+     background: #fff url(/themes/console/images/buttons/edit2.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.cancel, button.cancel {
+     background: #eee url(/themes/console/images/buttons/no.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1591 +1634 @@
 input.cancel:hover, button.cancel:hover,
 input.cancel:focus, button.cancel:focus {
+     background: #fff url(/themes/console/images/buttons/no.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
@@ -1596 +1640 @@
 input.accept[value^="Show"], button.accept[value^="Show"],
 input.check[value^="View"], button.check[value^="View"] {
+     background: #eee url(/themes/console/images/buttons/show.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1604 +1649 @@
 input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus,
 input.check[value^="View"]:focus, button.check[value^="View"]:focus {
+     background: #fff url(/themes/console/images/buttons/show.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
@@ -1609 +1655 @@
 input.cancel[value^="Hide"], button.cancel[value^="Hide"],
 input.delete[value^="Do not view"], button.delete[value^="Do not view"] {
+     background: #eee url(/themes/console/images/buttons/hide.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1617 +1664 @@
 input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus,
 input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus {
+     background: #fff url(/themes/console/images/buttons/hide.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.check, button.check {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1627 +1676 @@
 input.check:hover, button.check:hover,
 input.check:focus, button.check:focus {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.check[value$="updates"], button.check[value$="updates"] {
+     background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1637 +1688 @@
 input.check[value$="updates"]:hover, button.check[value$="updates"]:hover,
 input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
+     background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.delete, button.delete {
+     background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/delete.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1647 +1700 @@
 input.delete:hover, button.delete:hover,
 input.delete:focus, button.delete:focus {
+     background: #eee url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.delete[value^="Ban"], button.delete[value^="Ban"] {
+     background: #eee url(/themes/console/images/buttons/ban.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1657 +1712 @@
 input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover,
 input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
+     background: #fff url(/themes/console/images/buttons/ban.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.download, button.download {
+     background: #eee url(/themes/console/images/buttons/download.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1667 +1724 @@
 input.download:hover, button.download:hover,
 input.download:focus, button.download:focus {
+     background: #fff url(/themes/console/images/buttons/download.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.download[value^="Join"], button.download[value^="Join"] {
+     background: #eee url(/themes/console/images/buttons/users.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1677 +1736 @@
 input.download[value^="Join"]:hover, button.download[value^="Join"]:hover,
 input.download[value^="Join"]:focus, button.download[value^="Join"]:focus {
+     background: #fff url(/themes/console/images/buttons/users.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
@@ -1682 +1742 @@
 input.download[value$="from File"], button.download[value$="from File"],
 input.download[value$="from file"], button.download[value$="from file"] {
+     background: #eee url(/themes/console/images/buttons/from-file.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1690 +1751 @@
 input.download[value$="from File"]:focus, button.download[value$="from File"]:focus,
 input.download[value$="from file"]:focus, button.download[value$="from file"]:focus {
+     background: #fff url(/themes/console/images/buttons/from-file.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.download[value^="Dump"], button.download[value^="Dump"] {
+     background: #eee url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1700 +1763 @@
 input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover,
 input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
+     background: #fff url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.go, button.go, input[value="GO"] {
+     background: #eee url(/themes/console/images/buttons/go.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1710 +1775 @@
 input.go:hover, button.go:hover, input[value="GO"]:hover,
 input.go:focus, button.go:focus, input[value="GO"]:focus {
+     background: #fff url(/themes/console/images/buttons/go.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.go[value^="Create"], button.go[value^="Create"] {
+     background: #eee url(/themes/console/images/buttons/create-file.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1720 +1787 @@
 input.go[value^="Create"]:hover, button.go[value^="Create"]:hover,
 input.go[value^="Create"]:focus, button.go[value^="Create"]:focus {
+     background: #fff url(/themes/console/images/buttons/create-file.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.reload, button.reload {
+     background: #eee url(/themes/console/images/buttons/restore.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/restore.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1730 +1799 @@
 input.reload:hover, button.reload:hover,
 input.reload:focus, button.reload:focus {
+     background: #fff url(/themes/console/images/buttons/restore_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.reload[value$="restart"], button.reload[value$="restart"] {
+     background: #eee url(/themes/console/images/buttons/restart.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/restart.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1740 +1811 @@
 input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover,
 input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus {
+     background: #fff url(/themes/console/images/buttons/restart_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.reload[value^="Update"], button.reload[value^="Update"] {
+     background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1750 +1823 @@
 input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover,
 input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus {
+     background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.reload[value="Force GC"], button.reload[value="Force GC"] {
+     background: #eee url(/themes/console/images/buttons/clean.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/clean.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1760 +1835 @@
 input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover,
 input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus {
+     background: #fff url(/themes/console/images/buttons/clean_hover.png) no-repeat 7px center;
      background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
 }
 
 input.stop, button.stop {
+     background: #eee url(/themes/console/images/buttons/shutdown.png) no-repeat 7px 6px;
      background: url(/themes/console/images/buttons/shutdown.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd);
      padding: 5px 7px 5px 23px;
@@ -1770 +1847 @@
 input.stop:hover, button.stop:hover,
 input.stop:focus, button.stop:focus {
+     background: #fff url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 7px 6px;
      background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.search {
+     background: #eee url(/themes/console/images/buttons/search.png) no-repeat 7px 6px;
      background: url(/themes/console/images/buttons/search.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd);
-     padding: 5px 7px 5px 23px;
+     padding: 5px 7px 5px 25px;
 }
 
 button.search:hover,
 button.search:focus {
+     background: #fff url(/themes/console/images/buttons/search_hover.png) no-repeat 7px 6px;
      background: url(/themes/console/images/buttons/search_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff);
 }
@@ -1793 +1873 @@
 
 button.accept.control {
+     background: #eee url(/themes/console/images/buttons/Xstart.png) center center no-repeat;
      background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.accept.control:hover, button.accept.control:focus {
+     background: #fff url(/themes/console/images/buttons/Xstart.png) center center no-repeat;
      background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.stop.control {
+     background: #eee url(/themes/console/images/buttons/Xstop.png) center center no-repeat;
      background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.stop.control:hover, button.stop.control:focus {
+     background: #fff url(/themes/console/images/buttons/Xstop.png) center center no-repeat;
      background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.add.control {
+     background: #eee url(/themes/console/images/buttons/edit2.png) center center no-repeat;
      background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.add.control:hover, button.add.control:focus {
+     background: #fff url(/themes/console/images/buttons/edit2.png) center center no-repeat;
      background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.delete.control {
+     background: #eee url(/themes/console/images/buttons/delete.png) center center no-repeat;
      background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.delete.control:hover, button.delete.control:focus {
+     background: #fff url(/themes/console/images/buttons/delete_hover.png) center center no-repeat;
      background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.check.control {
+     background: #eee url(/themes/console/images/buttons/update.png) center center no-repeat;
      background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.check.control:hover, button.check.control:focus {
+     background: #fff url(/themes/console/images/buttons/update_hover.png) center center no-repeat;
      background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
 
 button.download.control {
+     background: #eee url(/themes/console/images/buttons/download.png) center center no-repeat;
      background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
 
 button.download.control:hover, button.download.control:focus {
+     background: #fff url(/themes/console/images/buttons/download.png) center center no-repeat;
      background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
 }
@@ -1855 +1947 @@
 
 .routersummary .reload, .routersummary .stop {
+     min-width: 92px !important;
      text-indent: -99999px;
      background-size: 16px 16px, 100% 100% !important;
@@ -1860 +1953 @@
 
 .routersummary .reload {
+     background: #eee url(/themes/console/images/buttons/restart.png) center center no-repeat !important;
      background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
 }
 
 .routersummary .reload:hover, .routersummary .reload:focus {
-     background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: #ddd url(/themes/console/images/buttons/restart_hover.png) center center no-repeat !important;
      background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      border: 1px solid #89f;
@@ -1875 +1969 @@
 
 .routersummary .stop {
+     background: #eee url(/themes/console/images/buttons/shutdown.png) center center no-repeat;
      background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
 }
@@ -1898 +1993 @@
 
 .routersummary .reload[value="restartImmediate"] {
+     background: #eee url(/themes/console/images/buttons/restart.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/restart.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1903 +1999 @@
 
 .routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active {
+     background: #eee url(/themes/console/images/buttons/restart_hover.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/restart_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1908 +2005 @@
 
 .routersummary .stop[value="shutdownImmediate"] {
+     background: #eee url(/themes/console/images/buttons/shutdown.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/shutdown.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1913 +2011 @@
 
 .routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active {
+     background: #eee url(/themes/console/images/buttons/shutdown_hover.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/shutdown_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1918 +2017 @@
 
 .routersummary .reload[value="Reseed"] {
+     background: #eee url(/themes/console/images/buttons/download.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1923 +2023 @@
 
 .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active {
+     background: #ddd url(/themes/console/images/buttons/download.png) center left 7px no-repeat !important;
      background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
      background-size: 14px auto, 100% 100% !important;
@@ -1928 +2029 @@
 
 .routersummary .download {
+     background: #eee url(/themes/console/images/buttons/download.png) 7px center no-repeat;
      background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
      background-size: 14px 14px, 100% 100% !important;
@@ -1933 +2035 @@
 
 .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active {
+     background: #ddd url(/themes/console/images/buttons/download.png) 7px center no-repeat;
      background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #ddd, #fff);
      background-size: 14px 14px, 100% 100% !important;
@@ -2035 +2138 @@
 }
 
+.main#dns {
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(images/bg0.png) !important;
+}
+
 .main#tunnelmgr {
      padding: 0 10px;
@@ -2144 +2251 @@
 }
 
-div.news a, #warning a {
+div.news a {
      color: #7f560f !important;
 }
 
-div.news a:hover, div.news a:focus, div.news a:visited:hover, div.news a:visited:focus, #warning a:hover, #warning a:focus {
+div.news a:hover, div.news a:focus, div.news a:visited:hover, div.news a:visited:focus {
      color: #f60 !important;
 }
 
-div.news a:visited, #warning a:visited {
+div.news a:visited {
      color: #5f4312 !important;
 }
@@ -2224 +2331 @@
 /* top navigation */
 
-div.confignav {
-     padding: 5px;
+.confignav {
+     padding: 5px 5px 6px;
      margin: -16px -16px 5px -16px;
      border: 1px solid #89f;
@@ -2376 +2483 @@
 
 #bandwidthconfig td:first-child {
-     width: 10%;
+     width: 25%;
      white-space: nowrap;
 }
@@ -3130 +3237 @@
      text-align: left;
      border: 1px solid #89f;
-     padding: 19px 20px;
+     padding: 18px 20px 16px;
      margin: 0 0 0 211px;
      line-height: 93%;
@@ -3301 +3408 @@
 
 h2, h3, h4#updateplugins {
-     background: url(images/titlebg.png) right center no-repeat;
+     background: #fff url(images/titlebg.png) right center no-repeat;
      background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
      box-shadow: inset 0 0 0 1px #fff;
@@ -3468 +3575 @@
 h4.app {
      margin-top: -5px;
+     background: #fefeff url(/themes/console/images/favicon.ico) 8px center no-repeat;
      background: url(/themes/console/images/eepsite.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
      background-size: 16px 16px, 100% 100%;
@@ -3477 +3585 @@
      clear: left;
      margin-top: 5px !important;
+     background: #fefeff url(/themes/console/light/images/globe.png) 8px center no-repeat;
      background: url(/themes/console/images/info/globe.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
      background-size: 16px 16px, 100% 100%;
@@ -3611 +3720 @@
 }
 
+.search td {
+     padding: 1px 0;
+}
+
 .search td:nth-child(2) {
      text-align: center !important;
-     padding: 0;
 }
 
@@ -4182 +4294 @@
 }
 
+.graphspanel a {
+     font-size: 0;
+}
+
 .graphspanel hr {
      margin: 10px 0;
@@ -4471 +4587 @@
 }
 
+.themechoice .optbox:checked + img, .themechoice .optbox:checked + object {
+     transform: scale(0.9);
+}
+
 .themechoice .optbox:focus + object ~ div.themelabel {
      color: #f60 !important;
@@ -4495 +4615 @@
      position: relative;
      top: 4px;
-     padding: 5px 10px 3px 5px;
+     padding: 5px 10px 5px 5px;
 }
 
@@ -4520 +4640 @@
 
 #themeoptions input {
-     margin: 6px 8px 6px 6px;
+     margin: 2px 8px 2px 6px;
      vertical-align: sub;
 }
@@ -5519 +5639 @@
 
 #help ul {
-     margin-bottom: 5px;
-     margin-top: -5px;
+     margin-bottom: 8px;
+     margin-top: -2px;
      padding-left: 15px;
 }
@@ -5532 +5652 @@
      margin-left: 20px;
      padding-top: 0;
+}
+
+#help code, #help tt {
+     font-size: 8pt;
 }
 
@@ -5542 +5666 @@
      margin-left: 20px;
      margin-right: 0;
+}
+
+#help li, #help p, #help td {
+     line-height: 140%;
 }
 
@@ -5848 +5976 @@
 }
 
+#floodfillconfig input[type="radio"] {
+     margin-right: 3px;
+}
+
 p#clientconf.infohelp, p#webappconfigtext.infohelp {
      background: #fff url(/themes/console/images/info/java_edit.png) 12px center no-repeat;
@@ -7218 +7350 @@
 
 .routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li,
-.news #newsStatus, .news #newsDisplay, .topness, .footnote, .cells tt, #profilelist tt, .sb_notice {
+.news #newsStatus, .news #newsDisplay, .topness, .footnote, .cells tt, #profilelist tt, .sb_notice, #help code, #help tt {
      font-size: 9pt !important;
+}
+
+.routersummary .reload, .routersummary .stop {
+     min-width: 102px !important;
 }
 

installer/resources/themes/console/classic/i2ptunnel.css

@@ -711 +711 @@
 }
 
-input.tunnelName, input.tunnelDescription, #userAgents {
+input.tunnelName, input.tunnelDescriptionText, #userAgents {
      width: 80%;
      min-width: 280px;
@@ -894 +894 @@
 }
 
-#clientTunnels .tunnelDescription {
+.tunnelDescription {
      padding-top: 1px !important;
 }

installer/resources/themes/console/dark/console.css

@@ -172 +172 @@
 }
 
+.warning hr {
+     margin-top: 10px !important;
+}
+
 #jumplinks h4 {
+     padding-bottom: 10px;
      margin-bottom: 10px;
 }
@@ -329 +334 @@
      border-radius: 0;
      mix-blend-mode: exclusion;
+     transition: ease all 0.2s;
 }
 
@@ -340 +346 @@
 .routersummary h3 a {
      vertical-align: middle;
+     transition: ease all 0.2s;
 }
 
@@ -345 +352 @@
      background: #010 !important;
      box-shadow: inset 0 0 2px 2px #000;
+     transition: ease all 0.2s;
 }
 
 .routersummary h3:hover a {
      color: #f60;
+     transition: ease all 0.2s;
 }
 
 .routersummary h3:active {
-     box-shadow: inset 4px 4px 2px #000;
+     box-shadow: inset 4px 4px 4px #000;
 }
 
@@ -458 +467 @@
 }
 
+#sb_warning + p:empty + form {
+     margin-top: 11px;
+     margin-bottom: -6px;
+}
+
 #sb_internals td, #sb_services td, #sb_advanced td, #sb_help td { /* color ellipsis */
      color: #595 !important;
@@ -706 +720 @@
      padding: 0;
      border: 1px solid #5df;
+     border: 1px solid rgba(85, 221, 255, 0.5);
      box-shadow: 0 0 1px #ccf;
 }
 
 #sb_bandwidthgraph:hover {
-     border: 1px solid #f60;
+     border: 1px solid #0f6;
      cursor: url(/themes/console/images/cursor_zoom.png), pointer;
 }
 
 a:active #sb_bandwidthgraph {
-     border: 1px solid #f30;
+     border: 1px solid #0f3;
 }
 
@@ -993 +1008 @@
      letter-spacing: 0.08em !important;
      word-spacing: normal !important;
+/*     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), url(/themes/console/dark/images/camotile2.png), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #003000, #000 75%) !important;
+     background-blend-mode: normal, exclusion, normal, normal;*/
 }
 
@@ -1078 +1095 @@
 }
 
-#newsStatus {
+#news #newsStatus {
      float: left;
      padding-top: 3px;
@@ -1157 +1174 @@
      background: url(images/header.png) repeat-x scroll center center #000;
      background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
-     padding: 7px !important;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) repeat scroll 0 0%, rgba(0, 0, 0, 0) url("/themes/console/dark/images/camotile2.png") !important;
+     padding: 7px 7px 8px !important;
      margin: -1px -16px 15px;
      border: 1px solid #494;
@@ -1163 +1181 @@
      line-height: 130% !important;
      text-align: center;
-     box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030;
+     box-shadow: inset 0 0 0 1px #000;
+     background-blend-mode: exclusion, normal;
 }
 
@@ -1267 +1286 @@
 
 #graphs {
-     padding-left: 10px;
-     padding-right: 10px;
+     padding: 0 10px
 }
 
 #graphs .messages {
      margin: 15px 5px -5px;
+}
+
+#graphs .widepanel {
+     margin: -4px 0 17px !important;
+}
+
+#graphdisplay {
+     margin-top: 14px !important;
 }
 
@@ -1441 +1467 @@
 #graphs td:first-child {
      text-align: right;
-     width: 85px;
+     width: 10%;
      white-space: nowrap;
-     padding: 13px 3px 13px 5px;
+     padding: 13px 3px 13px 15px;
+     font-weight: bold;
 }
 
@@ -1469 +1496 @@
 }
 
+.graphspanel a {
+     font-size: 0;
+}
+
 /* end graphs */
 
@@ -1497 +1528 @@
      font-size: 9pt;
      background: #000 url(images/header.png) center center repeat-x;
-     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     background: linear-gradient(to bottom, #002000, #000 75%) !important;
      border-top: 1px solid #494;
      border-bottom: 1px solid #494 !important;
@@ -1891 +1922 @@
 h1, h2, h3:not([id*="help"]), h4.app, h4.app2, .routersummary h3 {
      background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important;
 }
 
@@ -1897 +1929 @@
 }
 
-h1, h4.app, h4.app2 {
+.routersummary h3 {
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     transition: ease all 0.2s;
+}
+
+h1, h4.app, h4.app2, #news h3 {
      background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%), url(images/camotile2.png) #000 !important;
      background-blend-mode: exclusion;
@@ -1941 +1978 @@
 
 .routersummary button.reload, .routersummary button.stop {
-     min-width: 86px;
+     min-width: 92px;
      text-transform: capitalize;
+     margin: 3px 2px;
 }
 
@@ -2145 +2183 @@
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-weight: bold;
-     padding: 4px 16px 4px 4px !important;
+     padding: 3px 16px 3px 4px !important;
      cursor: pointer;
      overflow: hidden;
@@ -2226 +2264 @@
 
 input[type="submit"], input[type="reset"], select, button {
+     line-height: 120%;
      border: 1px solid #8b8;
      border-bottom: 1px solid #171;
@@ -2636 +2675 @@
 }
 
-.tablefooter tr, .tablefooter td {
+tr.tablefooter, .tablefooter td {
      background: #000 url(images/header.png) repeat-x center center !important;
-     background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%) !important;
+     background: linear-gradient(to bottom, #002000, #000 75%) !important;
      border-top: 1px solid #494 !important;
      border-bottom: 1px solid #494 !important;
@@ -2855 +2894 @@
 .themechoice:hover object {
      filter: drop-shadow(0 0 1px #f60);
-     transition: ease filter 0.3s;
+     transition: ease transform 0.05s;
 }
 
@@ -2867 +2906 @@
      color: #ee9 !important;
      box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.themechoice .optbox:checked + object, .themechoice .optbox:checked + img {
+     transform: scale(0.9);
 }
 
@@ -2946 +2989 @@
 
 #themeoptions input {
-     margin-left: 5px;
+     margin: 1px 5px;
 }
 
@@ -3046 +3089 @@
 }
 
+.langselect input + img {
+     opacity: 0.6;
+     transition: ease all 0.3s;
+}
+
 .langselect input:hover + img {
      box-shadow: 0 0 2px 1px #f60;
-     transition: ease box-shadow 0.3s;
+     transition: ease all 0.3s;
+     opacity: 1;
 }
 
@@ -3781 +3830 @@
      text-align: center;
      background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #002000, #000 75%) !important;
      text-indent: -99999px;
 }
@@ -4016 +4066 @@
 #help li {
      text-align: justify;
+     line-height: 150%;
+}
+
+#help li:last-child {
+     padding-bottom: 10px;
+}
+
+#help #faq li:last-child {
+     padding-bottom: 0;
 }
 
@@ -4420 +4479 @@
      list-style: none;
      font: bold 8pt "Droid Sans Mono",  "Lucida Console", "DejaVu Sans Mono", monospace;
-     line-height: 115%;
+     line-height: 120%;
      text-align: left;
      display: inline-block;
@@ -4458 +4517 @@
 
 font[color="#cc0000"] {
-     color: #c33 !important;
+     color: #900 !important;
 }
 
 #logs li font[color="#cc0000"]::before {
-     background: #c33;
+     background: #900;
 }
 
@@ -4801 +4860 @@
 #ipv4, #ipv6, #permabanned tr:nth-child(2) {
      background: #000 url(images/header.png) center center repeat-x;
-     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     background: linear-gradient(to bottom, #002000, #000 75%) !important;
      border-top: 1px solid #494;
      border-bottom: 1px solid #494;
@@ -5733 +5792 @@
 }
 
+#peerdefs td {
+     line-height: 140%;
+}
+
 h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, h3#webappconfig {
      margin-bottom: -14px !important;
@@ -5802 +5865 @@
      padding: 5px 10px;
      background: #000 url(images/header.png) center center repeat-x;
-     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     background: linear-gradient(to bottom, #002000, #000 75%) !important;
      border: 1px solid #494;
      text-align: left;
@@ -6732 +6795 @@
      font-size: 11.5pt;
      background: url(/themes/console/images/info/debug.png) right 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
-     background-size: 20px 20px, 100% 100% !important;
-     background-blend-mode: luminosity, normal;
+     background: url(/themes/console/images/info/debug.png) right 5px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important;
+     background-size: 20px 20px, 100% 100%, 100% 100%, 100% 100% !important;
+     background-blend-mode: luminosity, normal, normal, normal;
 }
 
@@ -6805 +6869 @@
 
 #debug h3.debug_outboundsessions, #debug h3.debug_inboundsessions {
-     padding: 6px 10px 6px 28px !important;
-     background-blend-mode: luminosity, normal;
+     padding: 6px 10px 8px 28px !important;
+     background-blend-mode: luminosity, normal, normal, normal;
 }
 
@@ -6812 +6876 @@
      margin-top: -2px !important;
      background: url(/themes/console/images/outbound.png) 6px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important;
+     background: url(/themes/console/images/outbound.png) 6px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important;
 }
 
 #debug h3.debug_inboundsessions {
      background: url(/themes/console/images/inbound.png) 6px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000 56%) !important;
+     background: url(/themes/console/images/inbound.png) 6px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #005000, #000 75%) !important;
 }
 
@@ -6873 +6939 @@
 #jardump td {
      border-right: 1px inset #131;
-     vertical-align: top;
-     padding: 2px 5px;
+     padding: 2px 5px 3px;
      color: #bb7;
 }
@@ -7162 +7227 @@
      width: calc(100% - 22px) !important;
      overflow-y: hidden;
+}
+
+#help .confignav, #debug .confignav {
+     position: sticky;
+     top: 0;
 }
 }

installer/resources/themes/console/dark/console_big.css

@@ -197 +197 @@
 }
 
+.routersummary button.reload, .routersummary button.stop {
+     min-width: 98px;
+     margin: 4px 3px !important;
+     padding: 4px 5px !important;
+}
+
 .sb_notice, .sb_notice a {
      font-size: 10pt !important;

installer/resources/themes/console/dark/i2ptunnel.css

@@ -169 +169 @@
      border: 1px solid #494;
      background: linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%), url(/themes/console/dark/images/camotile2.png) top left !important;
      font-size: 11pt;
      text-transform: uppercase;
@@ -182 +183 @@
 #messages h2 {
      background: url(/themes/console/images/info/logs.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/logs.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
 #globalTunnelControl h2 {
      background: url(/themes/console/images/info/control.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/control.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
 #servers h2 {
      background: url(/themes/console/images/info/server.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/server.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
 #clients h2 {
      background: url(/themes/console/images/info/client.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/client.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
 #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
      background: url(/themes/console/images/info/configure.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/configure.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.5) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
 #wizardPanel h2 {
      background: url(/themes/console/images/info/wizard.png) left 8px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
-     background-size: 20px auto, 100% 100%, 100% 100% !important;
+     background: url(/themes/console/images/info/wizard.png) left 8px center no-repeat, linear-gradient(to right, #000, rgba(0,0,0,0) 30%), linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,16,0,0.2) 50%, rgba(0,0,0,0.6)), url(/themes/console/dark/images/camotile2.png) top left, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,32,0,0.8) 2px, rgba(0,32,0,0.8) 4px) !important;
+     background-size: 20px auto, 100% 100%, 100% 100%, 175px 175px, 100% 100%, 100% 100% !important;
+     background-blend-mode: normal, normal, normal, exclusion, normal, normal;
 }
 
@@ -235 +248 @@
      background: #000;
      background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #002000, #000 75%);
      padding: 7px 5px;
      border-top: 1px solid #494;
@@ -244 +258 @@
      letter-spacing: 0.08em;
      word-spacing: 0.1em;
+}
+
+th:first-child {
+     padding-left: 10px;
 }
 
@@ -650 +668 @@
 
 button, input[type="submit"], input[type="reset"], a.control, select {
+     line-height: 120%;
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-weight: bold;
@@ -660 +679 @@
      background: #000;
      background: linear-gradient(to bottom, #010, #000);
+     background: linear-gradient(135deg, #000, rgba(0,0,0,0) 70%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #020, #000 75%);
      border-top: 1px solid #494 !important;
 }
@@ -842 +862 @@
 }
 
-input.tunnelName, input.tunnelDescription, #userAgents {
+input.tunnelName, input.tunnelDescriptionText, #userAgents {
      width: 80%;
      min-width: 280px;
@@ -955 +975 @@
 }
 
+#wizardPanel p, #wizardPanel td {
+     line-height: 140%;
+}
+
 #wizardPanel input::-moz-placeholder {
      color: #bb7;
@@ -1050 +1074 @@
 }
 
-#clientTunnels .tunnelDescription {
+.tunnelDescription {
      padding-top: 1px !important;
 }

installer/resources/themes/console/light/console.css

@@ -14 +14 @@
      background: #a4a4cb url(images/tile2.png) fixed;
      background-size: 32px 32px;
-}
 }
 
@@ -184 +183 @@
      vertical-align: middle;
      margin: -3px 0;
-     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #efefff);
      background-size: 14px 14px, 100% 100% !important;
      padding: 5px 7px 5px 22px !important;
@@ -224 +223 @@
      border-right: none;
      border-radius: 0;
-     box-shadow: inset 0 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff;;
      filter: none;
-}
-
-.routersummary h3 a:hover {
-     color: #f60;
 }
 
@@ -237 +232 @@
 }
 
-.routersummary h3:hover a {
-     color: #f60 !important;
-     text-shadow: 0 0 1px #fff;
-}
-
 .routersummary h3:active {
-     box-shadow: inset 2px 2px 2px #777;
+     box-shadow: inset 2px 2px 3px 1px #6f5f45;
+     box-shadow: inset 0 0 0 1px #fff9ef, inset 2px 2px 3px 1px rgba(111,95,69, 0.8);
+     transition: ease box-shadow 0.05s;
+     background: #fff linear-gradient(to bottom, #fff3df, #fff9ef) !important;
 }
 
@@ -255 +248 @@
      color: #2c4e8f;
      line-height: 110%;
+}
+
+.routersummary h3:hover a, .routersummary h3 a:hover {
+     color: #f60 !important;
+     text-shadow: 0 0 1px #fff;
+}
+
+.routersummary h3:active a, .routersummary h3 a:active {
+     color: #cf9233 !important;
 }
 
@@ -309 +311 @@
 }
 
+.sb_info a  {
+     vertical-align: baseline !important;
+}
+
 h4.sb_info + hr + form {
-     padding-top: 2px !important;
+     padding-top: 5px !important;
      margin-bottom: -1px;
 }
@@ -459 +465 @@
      border-radius: 2px;
      box-shadow: 0 0 1px #ccf;
+     transition: ease border 0.7s;
 }
 
@@ -470 +477 @@
      border: 1px solid #f60;
      cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+     transition: ease border 0.7s;
 }
 
@@ -634 +642 @@
 }
 
+#sb_warning + p:empty + form {
+     margin-top: 12px;
+     margin-bottom: -4px;
+}
+
 .sb_notice {
      background: #f2f2ff;
@@ -760 +773 @@
      display: inline-block;
      vertical-align: middle;
+     line-height: 120%;
      border: 1px solid #88f;
      border-radius: 2px;
@@ -771 +785 @@
 }
 
+.sb_netstatus a {
+     vertical-align: baseline;
+}
+
 .routersummary .firewalled {
      background: repeating-linear-gradient(135deg, rgba(220,255,220,0.3) 2px, rgba(255,255,220,0.3) 3px, rgba(220,255,220,0.3) 5px);
@@ -777 +795 @@
 .routersummary .error {
      background: rgba(255,110,110,0.1);
-     box-shadow: inset 0 0 0 1px rgba(255,0,0,0.3), 0 0 1px rgba(96,96,96,0.5);
-     background: repeating-linear-gradient(135deg, rgba(255,100,100,0.1) 2px, rgba(255,200,200,0.3) 3px,  rgba(255,100,100,0.1) 5px);
+     box-shadow: inset 0 0 0 1px rgba(200,0,0,0.5), 0 0 1px rgba(96,96,96,0.5);
+     background: repeating-linear-gradient(135deg, rgba(255,100,100,0.05) 2px, rgba(255,200,200,0.2) 3px,  rgba(255,100,100,0.05) 5px);
 }
 
@@ -804 +822 @@
 .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
 .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
-     padding-right: 2px;
-     vertical-align: middle;
+     margin-bottom: -1px;
+     padding-right: 1px;
+     vertical-align: text-bottom;
      display: inline-block;
      filter: drop-shadow(0 0 1px rgba(96,96,96,0.5));
@@ -1199 +1218 @@
 #jumplinks h4 {
      margin-bottom: 10px;
-     border-color: #41465f;
+     border-color: #7778bf !important;
      color: #41465f;
+     padding-bottom: 10px;
 }
 
@@ -1229 +1249 @@
 }
 
+.sorry {
+     color: #41465f;
+}
+
 .sorry hr, .sorry hr:last-child {
      color: #558;
@@ -1547 +1571 @@
 
 .newsentry + hr + #newsStatus, .newsentry + hr + #newsStatus + #newsDisplay {
-     margin-top: -6px !important;
+     margin-top: -2px;
+     margin-bottom: 3px;
 }
 
@@ -1684 +1709 @@
      box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400;
      background: #f60;
+     transition: ease box-shadow 0.05s;
 }
 
@@ -1976 +2002 @@
 }
 
+.graphspanel a {
+     font-size: 0;
+}
+
 .graphspanel img {
      padding: 1px;
@@ -1990 +2020 @@
      box-shadow: 0 0 1px #ccf;
      filter: none !important;
+     white-space: nowrap;
 }
 
@@ -2086 +2117 @@
      width: 10%;
      white-space: nowrap;
-     padding: 13px 3px 13px 5px;
+     padding: 13px 3px 13px 15px;
+     font-weight: bold;
+     color: #41465f;
 }
 
@@ -2899 +2932 @@
 #profiles .tunnel_peer img {
      margin-left: -6px;
+}
+
+#profiles .wideload {
+     text-align: center;
 }
 
@@ -3382 +3419 @@
      margin-bottom: -2px;
      box-shadow: inset 0 0 0 1px #fff;
+     text-align: left;
 }
 
@@ -3643 +3681 @@
 
 button.search {
-     background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 24px;
 }
 
 button.search:hover, button.search:focus, button.search:active {
-     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
@@ -3666 +3704 @@
 input, input:visited, button, button:visited {
      border: 1px solid #999daf;
-     box-shadow: inset 0 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 1px #fff;
      background: #eee;
-     background: linear-gradient(to bottom, #fff, #ddd);
+     background: linear-gradient(to bottom, #fff, #efefff);
      color: #41465f;
      margin: 3px;
@@ -3684 +3722 @@
 }
 
-input[type="submit"], input[type="reset"], button {
-     filter: saturate(70%) drop-shadow(0 0 1px #ccf);
+input[type="submit"], input[type="reset"], button, select {
+     filter: drop-shadow(0 0 1px #ccf);
 }
 
@@ -3694 +3732 @@
 
 button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
-     background: linear-gradient(to bottom, #ddd, #fff);
+     color: #19191f;
      border: 1px solid #f60;
+     background: linear-gradient(to bottom, #eee, #fff);
      filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
      transition: ease border 0.7s;
@@ -3701 +3740 @@
 
 button:active, input[type="submit"]:active, input[type="reset"]:active {
+     color: #4c526f;
      box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555;
      background-blend-mode: luminosity;
+     transition: ease box-shadow 0.05s;
 }
 
 input.accept, button.accept {
-     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
 
-input.accept:hover, button.accept:hover,
-input.accept:focus, button.accept:focus {
-     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+input.accept:hover, button.accept:hover, input.accept:focus, button.accept:focus {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.accept[value^="Unban"], button.accept[value^="Unban"] {
-     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3722 +3762 @@
 input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover,
 input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus {
-     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.accept[value^="Create"], button.accept[value^="Create"] {
-     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3732 +3772 @@
 input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover,
 input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus {
-     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.accept[value^="Filter"], button.accept[value^="Filter"] {
-     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3742 +3782 @@
 input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover,
 input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
-     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.add, button.add {
-     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3752 +3792 @@
 input.add:hover, button.add:hover,
 input.add:focus, button.add:focus {
-     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.add[value^="Adjust"], button.add[value^="Adjust"] {
-     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3762 +3802 @@
 input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover,
 input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
-     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.cancel, button.cancel {
-     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3772 +3812 @@
 input.cancel:hover, button.cancel:hover,
 input.cancel:focus, button.cancel:focus {
-     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.accept[value^="Show"], button.accept[value^="Show"],
 input.check[value^="View"], button.check[value^="View"] {
-     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3785 +3825 @@
 input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus,
 input.check[value^="View"]:focus, button.check[value^="View"]:focus {
-     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.cancel[value^="Hide"], button.cancel[value^="Hide"],
 input.delete[value^="Do not view"], button.delete[value^="Do not view"] {
-     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3798 +3838 @@
 input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus,
 input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus {
-     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.check, button.check {
-     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3808 +3848 @@
 input.check:hover, button.check:hover,
 input.check:focus, button.check:focus {
-     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.check[value$="updates"], button.check[value$="updates"] {
-     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3818 +3858 @@
 input.check[value$="updates"]:hover, button.check[value$="updates"]:hover,
 input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
-     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.delete, button.delete {
-     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3828 +3868 @@
 input.delete:hover, button.delete:hover,
 input.delete:focus, button.delete:focus {
-     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.delete[value^="Ban"], button.delete[value^="Ban"] {
-     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3838 +3878 @@
 input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover,
 input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
-     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.download, button.download {
-     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3848 +3888 @@
 input.download:hover, button.download:hover,
 input.download:focus, button.download:focus {
-     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.download[value^="Join"], button.download[value^="Join"] {
-     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3858 +3898 @@
 input.download[value^="Join"]:hover, button.download[value^="Join"]:hover,
 input.download[value^="Join"]:focus, button.download[value^="Join"]:focus {
-     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.download[value$="from File"], button.download[value$="from File"],
 input.download[value$="from file"], button.download[value$="from file"] {
-     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3871 +3911 @@
 input.download[value$="from File"]:focus, button.download[value$="from File"]:focus,
 input.download[value$="from file"]:focus, button.download[value$="from file"]:focus {
-     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.download[value^="Dump"], button.download[value^="Dump"] {
-     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3881 +3921 @@
 input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover,
 input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
-     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.go, button.go, input[value="GO"] {
-     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3891 +3931 @@
 input.go:hover, button.go:hover, input[value="GO"]:hover,
 input.go:focus, button.go:focus, input[value="GO"]:focus {
-     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.go[value^="Create"], button.go[value^="Create"] {
-     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3901 +3941 @@
 input.go[value^="Create"]:hover, button.go[value^="Create"]:hover,
 input.go[value^="Create"]:focus, button.go[value^="Create"]:focus {
-     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.reload, button.reload {
-     background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3911 +3951 @@
 input.reload:hover, button.reload:hover,
 input.reload:focus, button.reload:focus {
-     background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.reload[value$="restart"], button.reload[value$="restart"] {
-     background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3921 +3961 @@
 input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover,
 input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus {
-     background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.reload[value^="Update"], button.reload[value^="Update"] {
-     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3931 +3971 @@
 input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover,
 input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus {
-     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.reload[value="Force GC"], button.reload[value="Force GC"] {
-     background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3941 +3981 @@
 input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover,
 input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus {
-     background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
 input.stop, button.stop {
-     background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #efefff);
      padding: 5px 7px 5px 22px;
 }
@@ -3951 +3991 @@
 input.stop:hover, button.stop:hover,
 input.stop:focus, button.stop:focus {
-     background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #eee, #fff);
 }
 
@@ -3964 +4004 @@
 
 button.accept.control {
-     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.accept.control:hover, button.accept.control:focus {
-     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
 button.stop.control {
-     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.stop.control:hover, button.stop.control:focus {
-     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
 button.add.control {
-     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.add.control:hover, button.add.control:focus {
-     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
 button.delete.control {
-     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.delete.control:hover, button.delete.control:focus {
-     background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
 button.check.control {
-     background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.check.control:hover, button.check.control:focus {
-     background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
 button.download.control {
-     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 button.download.control:hover, button.download.control:focus {
-     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
 }
 
@@ -4028 +4068 @@
 
 .routersummary .reload {
-     background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff) !important;
 }
 
 .routersummary .reload:hover, .routersummary .reload:focus {
-     background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
-     background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat,  linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
+     background: url(/themes/console/images/buttons/shutdown_hover.png) 37% center no-repeat, url(/themes/console/images/buttons/restart_hover.png) 63% center no-repeat,  linear-gradient(to bottom, #eee, #fff) !important;
      border: 1px solid #f60;
 }
@@ -4045 +4085 @@
      text-align: left;
      min-width: 0;
-     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important;
 }
 
 .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus {
-     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
      padding: 5px 7px 5px 22px !important;
 }
 
 .routersummary .stop {
-     background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 .routersummary .stop:hover, .routersummary .stop:focus {
-     background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
      border: 1px solid #f60;
 }
 
 .routersummary .download {
-     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #efefff);
      background-size: 14px 14px, 100% 100% !important;
      padding: 5px 7px 5px 22px !important;
@@ -4089 +4129 @@
 
 .routersummary .reload[value="restartImmediate"] {
-     background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active {
-     background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .stop[value="shutdownImmediate"] {
-     background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active {
-     background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .reload[value="Reseed"] {
-     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #efefff) !important;
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active {
-     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #eee, #fff);
      background-size: 14px 14px, 100% 100% !important;
 }
 
 .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active {
-     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #eee, #fff);
      background-size: 14px 14px, 100% 100% !important;
      padding: 5px 7px 5px 22px !important;
@@ -4211 +4251 @@
      appearance: none;
      background: url(images/dropdown.png) right center no-repeat #fff;
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #efefff);
      background-blend-mode: hard-light, normal;
      padding: 4px 16px 4px 4px !important;
-     color: #33333f;
+     color: #41465f;
      margin: 5px;
      border: 1px solid #999daf;
@@ -4231 +4271 @@
 }
 
-select:focus {
-     box-shadow: 0 0 0 1px #89f;
-     color: #19191f;
+select:-moz-focusring {
+     outline: 1px solid transparent;
 }
 
@@ -4245 +4284 @@
 
 select:hover, select:active {
-     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     color: #19191f;
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
 }
 
 select:focus {
-     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
-     box-shadow: 0 0 0 1px #89f;
+     color: #19191f;
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
+     box-shadow: 0 0 1px #89f;
+}
+
+select::-moz-focus-inner {
+     outline: none !important;
+     border: none !important;
 }
 
@@ -4616 +4662 @@
 }
 
+.themechoice .optbox:checked + object, .themechoice .optbox:checked + img {
+     transform: scale(0.9);
+     animation: glow 20s 10s infinite;
+}
+
 #themeoptions {
      clear: both;
@@ -4623 +4674 @@
      position: relative;
      top: 4px;
-     padding: 5px 10px 3px 5px;
+     padding: 5px 10px 5px 5px;
 }
 
@@ -4632 +4683 @@
 #themeoptions label {
      white-space: nowrap;
-     margin: 4px 10px 4px 0 !important;
+     margin: 2px 10px 2px 0 !important;
      display: inline-block;
 }
@@ -4648 +4699 @@
 
 #themeoptions input {
-     margin-left: 5px;
+     margin: 2px 5px 2px 5px;
      vertical-align: sub;
 }
@@ -5910 +5961 @@
 
 .sortup {
-     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 .sortup:hover {
-     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
      border: 1px solid #f60;
      opacity: 1;
@@ -5932 +5983 @@
 
 .sortdown {
-     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #efefff);
 }
 
 .sortdown:hover {
-     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #eee, #fff);
      border: 1px solid #f60;
      opacity: 1;
@@ -6148 +6199 @@
 #help td.infohelp, #help td.infowarn, #help td.infohelp:hover, #help td.infowarn:hover {
      background-size: 24px 24px !important;
-     padding-left: 46px !important;
+     padding-left: 50px !important;
      color: #33333f !important;
      padding-right: 15px !important;
+}
+
+#configinfo td.infowarn, #configinfo tr:hover td.infowarn {
+     padding-left: 46px !important;
+}
+
+#help code, #help tt {
+     font-size: 8pt;
+     font-weight: bold;
+     color: #050;
 }
 
@@ -7405 +7466 @@
 }
 
-.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, pre,
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, pre, #help code, #help tt,
 #jardump tt, #jardump td, div.news, #logs li, tt, .cells tt, #profilelist tt, .leaseset tt, .links code, #console code {
      font-size: 9pt !important;
@@ -7424 +7485 @@
 #tunnels .tunnel_peer tt {
      margin-left: 3px !important;
+     letter-spacing: 0.1em !important;
 }
 

installer/resources/themes/console/light/console_ar.css

@@ -31 +31 @@
 
 h2, h3 {
-     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
 }
 
@@ -61 +61 @@
 h1 {
      margin: 0 212px -15px 0;
-     padding: 15px 20px 15px 10px;
+     padding: 16px 20px 15px 10px;
      background: linear-gradient(to left, #fcfcff, rgba(252,252,255,0) 600px), linear-gradient(to bottom, #fcfcff 50%, rgba(248,248,255,0.6) 50%), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fafaff !important;
 }
@@ -85 +85 @@
 .routersummary img[src$="i2plogo.png"] {
      margin-left: 0 !important;
-     margin-right: -1px !important;
 }
 
@@ -105 +104 @@
      line-height: 120%;
      font-size: 10pt;
-     font-weight: bold;
 }
 
@@ -317 +315 @@
      text-align: right !important;
      background-position: right 14px center !important;
-     background-image: url("/themes/console/images/info/infohelp.png");
+     background-image: url(/themes/console/images/info/infohelp.png);
      background-size: 28px auto !important;
 }
@@ -515 +513 @@
 .themelabel {
      padding: 3px !important;
-     font-size: 11.5pt !important;
+     font-size: 10pt !important;
      font-weight: bold;
 }
@@ -681 +679 @@
 }
 
+#eventlog {
+     margin-left: -16px !important;
+     margin-right: 0 !important;
+}
+
 h4.app {
-     background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
      background-size: 16px 16px, 100% 100%, 100% 100% !important;
      margin-top: 15px;
@@ -690 +693 @@
      clear: left;
      margin-top: 10px !important;
-     background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
      background-size: 16px 16px, 100% 100%, 100% 100% !important;
 }
@@ -706 +709 @@
 div.news h3, #news h3 {
      background: url(images/news.png) right 8px center no-repeat, linear-gradient(to left, #fff, #eef) !important;
-     background: url(images/news.png) right 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     background: url(images/news.png) right 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
      padding: 5px 30px 5px 10px;
 }
@@ -718 +721 @@
 }
 
-#news #newsStatus, #newsDisplay {
+#news #newsStatus, #news #newsDisplay {
      margin-top: 6px;
      margin-bottom: -2px !important;
+}
+
+#news #newsStatus {
+     margin: -2px 0 0;
+     font-size: 9pt;
 }
 
@@ -953 +961 @@
 #pluginupdater.formaction {
      margin: -16px 0;
+}
+
+#config_service .formaction {
+     margin-top: -13px;
 }
 

installer/resources/themes/console/light/console_big.css

@@ -14 +14 @@
 }
 
-b, a, input, button, input[type="submit"], input[type="reset"], i, th, thead, tfoot, .mediumtags {
+b, a, input, button, input[type="submit"], input[type="reset"], i, th, thead, tfoot, .mediumtags, .themelabel {
      font-weight: normal !important;
      font-style: normal !important;
@@ -237 +237 @@
 }
 
+.formaction {
+     margin-top: -16px;
+}
+
 /* responsive layout */
 

installer/resources/themes/console/light/i2ptunnel.css

@@ -213 +213 @@
      border-radius: 2px;
      background: #eee;
-     background: linear-gradient(to bottom, #fff, #ddd);
+     background: linear-gradient(to bottom, #fff, #efefff);
      box-shadow: inset 0 0 0 1px #fff;
      filter: drop-shadow(0 0 1px #ccf);
@@ -231 +231 @@
      border: 1px solid #f60 !important;
      background: #ddd;
-     background: linear-gradient(to bottom, #ddd, #fff);
+     background: linear-gradient(to bottom, #eee, #fff);
      box-shadow: inset 0 0 0 1px #fff !important;
      filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
@@ -238 +238 @@
 
 .control:active {
-     box-shadow: inset 2px 2px 1px #999 !important;
-     color: #33333f;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555 !important;
+     color: #4c526f;
 }
 
@@ -286 +286 @@
      min-width: 140px;
      background: #fff;
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #efefff);
      background-blend-mode: hard-light, normal;
      color: #33333f;
@@ -307 +307 @@
 
 select:hover, select:active, select:focus {
-     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #eee, #fff) !important;
 }
 
@@ -349 +349 @@
      border-radius: 2px 2px 0 0;
      background: #fcfcff;
-     background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) #fff !important;
+     background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%) #fff !important;
      font-size: 11.5pt;
      text-transform: uppercase;
@@ -367 +367 @@
 
 #messages h2 {
-     background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
 #globalTunnelControl h2 {
-     background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
 #servers h2 {
-     background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
 #clients h2 {
-     background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
 #tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
-     background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
 #wizardPanel h2 {
-     background: url(/themes/console/images/info/wizard.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background: url(/themes/console/images/info/wizard.png) left 5px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
 }
 
@@ -746 +746 @@
 }
 
-input.tunnelName, input.tunnelDescription, #userAgents {
+input.tunnelName, input.tunnelDescriptionText, #userAgents {
      width: 80%;
-     min-width: 280px;
+     min-width: 280px !important;
      text-overflow: ellipsis;
 }
@@ -925 +925 @@
 }
 
-#clientTunnels .tunnelDescription {
+.tunnelDescription {
      padding-top: 1px !important;
 }

installer/resources/themes/console/light/mobile.css

@@ -66 +66 @@
 }
 
-.routersummary table, table[id^="sb_"], #sb_services, #sb_internals, #sb_advanced {
+.routersummary table, table[id^="sb_"], #sb_services, #sb_internals, #sb_advanced, #sb_help {
      width: 100% !important;
      margin: -9px 0 -7px !important;
@@ -74 +74 @@
 }
 
+#sb_internals, #sb_advanced, #sb_help {
+     margin-top: -11px !important;
+}
+
+#sb_internals td, #sb_advanced td, #sb_help td {
+     padding: 3px 4px !important;
+}
+
+#sb_internals a, #sb_advanced a, #sb_help a {
+     margin: 3px 3px 4px;
+     padding: 3px 10px !important;
+     border-radius: 2px;
+     background: #ddf;
+     box-shadow: 0 0 1px #99f;
+}
+
+#sb_internals a:active, #sb_advanced a:active, #sb_help a:active {
+     box-shadow: inset 2px 2px 2px #aaa;
+}
+
 table[id^="sb_"] td, #sb_localtunnels td {
-     padding: 3px 6px !important;
+     padding: 2px 6px 0 !important;
 }
 
@@ -111 +131 @@
 }
 
+#sb_graphcontainer, #sb_graphcontainer + hr {
+     display: none;
+}
+
 .routersummary button[type="submit"], .routersummary button[type="cancel"] {
-     margin: 5px 5px 3px !important;
+     margin: 3px 5px 0 !important;
      padding: 8px 5px !important;
-     min-width: 120px !important;
+     min-width: 280px !important;
+}
+
+.percentBarOuter {
+     width: 590px;
+     margin: -4px 4px -4px 4px;
 }
 

installer/resources/themes/console/midnight/console.css

@@ -173 +173 @@
      box-shadow: inset 0 0 3px 3px #000;
      border: 1px solid #3e3f8f;
-     padding: 4px;
+     padding: 5px;
 }
 
@@ -856 +856 @@
      background-position: center center !important;
      padding: 5px !important;
+     min-width: 92px !important;
+     margin-top: 3px;
+     margin-bottom: 3px;
 }
 
@@ -1439 +1442 @@
 }
 
+#sb_warning + p:empty + form {
+     margin-top: 11px;
+     margin-bottom: -7px;
+}
+
 /* sidebar stacked tables fix */
 
@@ -1643 +1651 @@
 #sb_graphcontainer {
      background-color: #000;
-     background-position: left -72px top -26px !important;
+     background-position: left -72px top -24px !important;
      background-size: 280px 90px !important;
      background-repeat: no-repeat !important;
@@ -1686 +1694 @@
      background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px);
      background: repeating-linear-gradient(to right, #000 1px, #000 2px, #003 2px, #003 4px);
-     border: 1px solid #171c3f;
+     border: 1px solid #292b5f;
      opacity: 1;
      box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
@@ -1960 +1968 @@
 
 #news #newsDisplay a, #graphopts a {
-     border: 1px solid #005;
+     border: 1px solid #001;
      margin: 0 -2px;
      padding: 1px 10px !important;
      background: #002;
-     background: rgba(0,0,64,0.4);
+     background: rgba(0,0,48,0.4);
      border-radius: 15px;
      filter: drop-shadow(0 0 1px rgba(0,0,64,0.8));
@@ -2297 +2305 @@
 }
 
+.graphspanel a {
+     font-size: 0;
+}
 .graphspanel p {
      text-align: center;
@@ -2323 +2334 @@
 
 #graphopts a, #graphopts a:visited {
-     color: #54508f;
+     color: #54508f !important;
 }
 
@@ -2332 +2343 @@
 #graphopts a:active {
      color: #2d277f !important;
+}
+
+#graphopts a:empty {
+     display: none;
 }
 
@@ -2414 +2429 @@
 #graphs input[type="text"] {
      min-width: 60px;
+}
+
+#graph_single {
+     background-size: auto 100px !important;
 }
 
@@ -2546 +2565 @@
 }
 
-a:link, h2 a:link {
+a:link, h2 a:link, #news #newsDisplay a:visited, #graphopts a:visited {
      color: #7972d1;
      text-decoration: none;
@@ -3343 +3362 @@
 .themechoice object, .themechoice img {
      padding: 3px 3px 4px;
+     opacity: 0.75;
 }
 
@@ -3348 +3368 @@
      padding: 3px 3px 0;
      margin-bottom: 0;
+     opacity: 0.75;
 }
 
@@ -3373 +3394 @@
 }
 
+.themechoice .optbox:checked + object, .themechoice .optbox:checked + img {
+     transform: scale(0.9);
+     opacity: 1;
+}
+
 .themechoice .optbox:focus + object ~ div.themelabel {
      color: #652787;
@@ -3393 +3419 @@
 #themeoptions label {
      white-space: nowrap;
-     margin: 4px 10px 4px 0 !important;
+     margin: 1px 10px 1px 0 !important;
      display: inline-block;
 }
@@ -3410 +3436 @@
 
 #themeoptions input {
-     margin-left: 5px;
+     margin-left: 5px 1px;
 }
 
@@ -3695 +3721 @@
      background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat;
      background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000, #000019);
-     padding: 4px 5px 4px 26px !important;
+     padding: 5px 5px 5px 26px !important;
      background-size: 16px 16px, 100% 100% !important;
 }
@@ -3706 +3732 @@
      background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat;
      background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #000, #000019);
-     padding: 4px 5px 4px 22px !important;
+     padding: 5px 5px 5px 22px !important;
      background-size: 16px 16px, 100% 100% !important;
 }
@@ -5718 +5744 @@
 .footnote {
      text-align: right;
-     font-size: 7pt;
+     font-size: 8pt;
      margin-bottom: 5px !important;
 }
@@ -6943 +6969 @@
 }
 
+.sb_netstatus, .sb_netstatus a {
+      vertical-align: baseline;
+}
+
 .routersummary .error, .routersummary .warn, .routersummary .testing, .routersummary .hidden,
 .routersummary .running, .routersummary .firewalled, .routersummary .vmcomm, .routersummary .clockskew, .tunnelBuildStatus {
@@ -6984 +7014 @@
 .routersummary .error::before, .routersummary .warn::before, .routersummary .testing::before, .routersummary .hidden::before,
 .routersummary .running::before, .routersummary .firewalled::before, .routersummary .vmcomm::before, .routersummary .clockskew::before {
-     padding: 0 2px;
+     padding: 0 1px 0 0;
      vertical-align: middle;
      display: inline-block;
@@ -7581 +7611 @@
 }
 
-.topness, .footnote, #newsStatus, #newsDisplay {
+.topness, #newsStatus, #newsDisplay {
      font-size: 9pt !important;
 }

installer/resources/themes/console/midnight/i2ptunnel.css

@@ -790 +790 @@
 }
 
-input.tunnelName, input.tunnelDescription, #userAgents {
+input.tunnelName, input.tunnelDescriptionText, #userAgents {
      width: 80%;
      min-width: 280px;
@@ -985 +985 @@
 }
 
-#clientTunnels .tunnelDescription {
+.tunnelDescription {
      padding-top: 1px !important;
 }

installer/resources/themes/snark/classic/nocollapse.css

@@ -9 +9 @@
 label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input:focus + label.toggleview {
      box-shadow: inset 0 0 0 1px #fff;
-     background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background: linear-gradient(to bottom, #fff 0%, #ddf 100%) !important;
      cursor: default !important;
 }

installer/resources/themes/snark/classic/snark.css

@@ -7 +7 @@
      background: #eef url(/themes/console/classic/images/bg0.png) repeat scroll center bottom;
      background-size: 120px 120px;
+     margin: 3px 4px;
 }
 
@@ -51 +52 @@
      min-width: 900px !important;
      margin: 5px 0 0 0;
-     padding: 10px;
+     padding: 9px;
      text-align: center;
      border: 1px solid #89f;
-     background: #eef;
-     box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset;
+     border-radius: 0 0 3px 3px;
+     background: #dfe6ff;
+     background: repeating-linear-gradient(to right, #fff 1px, #cfd9ff 2px, #fff 4px);
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
@@ -62 +65 @@
      padding: 0;
      border: none;
+     border-radius: 0;
      background: none;
-     background: linear-gradient(to right, #fff 0%, #ddf 50%, #fff 100%);
+     background: linear-gradient(to right, #fff, #ddf, #fff);
+     background: repeating-linear-gradient(to right, #fff 1px, #bbf 2px, #fff 4px);
      box-shadow: none;
 }
@@ -80 +85 @@
      color: #000;
      border: 1px solid #89f;
+     border-radius: 3px 3px 0 0;
      background: #eff2ff !important;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
-     box-shadow: 0 0 1px #fff;
+     background: linear-gradient(to bottom, #fff, #eff2ff) !important;
+     box-shadow: 0 0 1px #fff, inset 0 0 0 1px #fff;
      position: sticky;
      top: -1px;
@@ -90 +96 @@
 .iframed .snarknavbar {
      margin-top: -2px !important;
+     padding: 8px 0;
+     border-radius: 0;
      position: static;
+     background: linear-gradient(to bottom, #fff, #eff2ff 75%) !important;
 }
 
 .snarkNav:link, .snarkNav:visited {
      display: inline-block;
+     line-height: 110%;
      color: #444688;
      font-size: 9pt;
      font-weight: bold;
-     margin: -1px 0 !important;
+     margin: -1px -2px -1px -3px !important;
      padding: 5px 7px 5px 23px !important;
      text-decoration: none !important;
      letter-spacing: .1em;
      text-transform: uppercase !important;
-     border: 1px solid #ccf;
-     border-right: 1px solid #aaf;
-     border-bottom: 1px solid #aaf;
+     border: 1px solid #88f;
      box-shadow: inset 0 0 0 1px #fff, 0 0 1px rgba(200,200,200,0.5);
+     opacity: 0.85;
+     transition: ease all 0.1s;
 }
 
 .snarkNav:link:last-child {
      margin-left: 3px;
+     border-radius: 0 3px 3px 0;
 }
 
 .nav_main:link {
-     background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     border-radius: 3px 0 0 3px;
 }
 
 .nav_forum:link {
-     background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
 }
 
 .nav_tracker:link {
-     background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+}
+
+.snarkNav.nav_main:last-child {
+     border-radius: 3px;
 }
 
@@ -128 +144 @@
      color: #f50;
      border: 1px solid #f50;
+     opacity: 1;
+     position: relative;
+     z-index: 999;
+     transition: ease all 0.1s;
 }
 
 .nav_main:hover, .nav_main:focus {
      background: url(images/button_snark_hover.png) 7px center no-repeat #eee !important;
-     background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important;
 }
 
 .nav_forum:hover, .nav_forum:focus {
      background: url(images/button_forum_hover.png) 7px center no-repeat #eee !important;
-     background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important;
 }
 
 .nav_tracker:hover, .nav_tracker:focus {
      background: url(images/button_tracker_hover.png) 7px center no-repeat #eee !important;
-     background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #eff2ff, #fff) !important;
 }
 
@@ -148 +168 @@
      text-decoration: none !important;
      color: #fff !important;
-     border: 1px solid #aaa;
      text-shadow: none;
-     box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 3px #824b1b !important;
+     box-shadow: inset 4px 4px 3px #824b1b, 0 0 0 0 rgba(0,0,0,0) !important;
+     transition: ease all 0.1s;
 }
 
@@ -182 +202 @@
      border-bottom: 1px solid #89f;
      background: url(images/hat.png) bottom right no-repeat #ddf;
+     background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #eff3ff, #e9efff);
+     background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, rgba(239, 243, 255, 0.7), rgba(233, 239, 255, 0.7));
+     box-shadow: inset 0 0 0 1px #f2f2ff;
+}
+
+.iframed .snarkMessages {
      background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #e3e3ff, #ddf);
-     box-shadow: inset 0 0 0 1px #ddf;
+     background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, rgba(227, 227, 255, 0.7), rgba(221, 221, 255, 0.7));
 }
 
@@ -202 +228 @@
 .snarkMessages li {
      margin-left: -15px;
-     font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #4b4b76;
 }
@@ -212 +238 @@
      width: 13px;
      height: 11px;
-     margin: 1px 2px 0 1px;
+     margin: 1px 1px 0 0;
      background-size: 9px 9px;
      opacity: 0.7;
@@ -259 +285 @@
 .ParentDir {
      font-size: 8pt;
-     padding: 4px 0;
+     padding: 4px 0 0 6px;
      text-align: left !important;
      border: 1px solid #89f !important;
@@ -320 +346 @@
 }
 
+.snarkTorrents thead img {
+     display: none;
+}
+
+.snarkTorrents thead a img {
+     display: inline;
+}
+
 .snarkTorrents img {
      margin: 0 !important;
@@ -349 +383 @@
      text-align: center !important;
      font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     padding: 3px !important;
+     border: 1px solid transparent !important;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #f60 !important;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #f60;
+     background: #ddf;
+     background: linear-gradient(to bottom, #fff 50%, #ddf 50%);
+     filter: none !important;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     box-shadow: inset 2px 2px 2px #99f;
 }
 
@@ -358 +414 @@
 .snarkGraphicStatus {
      width: 24px !important;
+     text-align: center !important;
+     padding-left: 3px !Important;
 }
 
@@ -395 +453 @@
 tfoot tr:first-child th {
      vertical-align: middle !important;
+     color: #3e4b6f !important;
 }
 
@@ -400 +459 @@
      font-size: 9pt;
      padding: 3px 2px;
-     color: #0c153d;
+     color: #3e4b6f;
      border-top: 1px solid #89f;
      border-bottom: 1px solid #89f;
      background: #fff;
-     background-image: linear-gradient(to bottom, #fff, #eef);
+     background: linear-gradient(to bottom, #fff, #eef);
 }
 
@@ -415 +474 @@
      padding-left: 0;
      text-align: left !important;
-}
-
-th:first-child img {
-     margin: 1px -2px 3px 1px !important;
-}
-
-th:nth-child(2) img {
-     margin: 1px 5px 3px 2px !important;
 }
 
@@ -523 +574 @@
 .snarkTorrents td {
      text-align: left;
+     padding-top: 4px;
+     padding-bottom: 4px;
 }
 
@@ -538 +591 @@
 
 tt {
-     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-family: "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
 }
 
@@ -602 +655 @@
 }
 
-.snarkTorrentInfo tr:last-child {
-     background: none;
-}
-
-.snarkTorrentInfo tr:last-child td {
-     padding: 5px !important;
+#torrentInfoControl td {
+     padding: 7px 5px !important;
      text-align: right !important;
      border-top: 1px solid #89f !important;
+     background: linear-gradient(to bottom, #fff, #eef);
 }
 
@@ -653 +703 @@
      margin-bottom: 0;
      border-bottom: 1px solid #89f;
+     background: #eef;
 }
 
@@ -671 +722 @@
 }
 
-.snarkDirInfo th a img, .snarkDirInfo th img  {
-     max-height: 20px;
-}
-
 .snarkDirInfo th img[alt="Directory"] {
      margin-right: 5px !important;
@@ -684 +731 @@
 }
 
-.snarkDirInfo td:first-child {
-     padding-left: 4px;
+.snarkFileIcon {
+     width: 16px;
+     padding-left: 2px;
      padding-right: 2px;
      text-align: left;
 }
 
-.snarkDirInfo td:first-child img {
+.snarkFileIcon img {
+     filter: none;
      padding-right: 6px;
 }
@@ -724 +773 @@
 }
 
-.snarkDirInfo .headerpriority {
-     text-align: center !important;
-     vertical-align: middle;
-}
-
-td.subHeaderPriority, td.priority {
-     width: 0;
-     min-width: 36px !important;
-     padding: 0 5px 0 0 !important;
-     text-align: center !important;
-}
-
-td.subHeaderPriority {
-     font-size: 7.5pt;
-     font-weight: bold;
-     padding: 0 1px !important;
-     text-align: center !important;
-     background: #020;
-     background: url("images/snarktopnav.png") repeat-x scroll center center #101;
-     background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%);
+.snarkDirInfo thead th:nth-child(2), .headerstatus, .headerpriority, .snarkFileStatus {
+     text-align: center;
 }
 
@@ -754 +785 @@
 }
 
-tr.priority:last-child {
-     border-bottom: none !important;
-}
-
-th.headerdownloaded {
-     padding-left: 25px !important;
-}
-
 .snarkFileStatus {
-     text-align: center;
      white-space:nowrap;
      width: 120px;
-}
-
-.snarkFileIcon {
-     width: 16px;
-     padding: 0;
-}
-
-.snarkFileIcon img {
-     filter: none;
-}
-
-.snarkFileStatusIcon {
-     width: 24px;
-     padding: 0 4px 0 0;
-     text-align: center;
 }
 
@@ -788 +795 @@
      font-size: 9pt;
      padding: 2px;
-     color: #2c354f !important;
+     color: #3e4b6f !important;
 }
 
@@ -802 +809 @@
 .snarkTorrentName {
      line-height: 110%;
-     padding: 0;
+     padding: 4px 3px;
 }
 
@@ -826 +833 @@
      padding: 3px !important;
      background: #339;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%);
+     background: linear-gradient(to bottom, #fff 50%, #ddf 50%);
      border-radius: 2px;
-     border: 1px solid #89f !important;
+     border: 1px solid #bbf !important;
      margin: 2px 1px;
-     filter: drop-shadow(0 0 1px #bbb);
+     box-shadow: 0 0 1px #f2f2ff !important;
      height: 10px;
 }
@@ -836 +843 @@
 .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
      border: 1px solid #f60 !important;
-     filter: drop-shadow(0 0 1px #f60);
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     box-shadow: 0 0 1px #f60 !important;
+     filter: none !important;
 }
 
 .snarkTorrentAction input[type="image"]:active {
-     background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%);
-     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333;
-     filter: none !important;
+     background: linear-gradient(to bottom, #eef 50%, #bbf 50%);
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #559 !important;
 }
 
 /* end torrent control buttons */
 
+.routerdown {
+     padding: 10px;
+     color: #363759;
+     border-bottom: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
 .snarkTorrentNoneLoaded {
-     font-size: 8.5pt;
+     padding: 10px 5px;
+     background: #fff;
+     background: linear-gradient(to right, #eef, #fff, #eef);
+     border-bottom: 1px solid #89f;
+}
+
+.snarkTorrentNoneLoaded td {
+     color: #0c153d !important;
+     text-align: center !important;
      font-weight: bold;
-     padding: 10px 5px;
-     color: #4f2 !important;
-     border-bottom: 1px solid #89f;
-     background: #fff;
-}
-
-.snarkTorrentNoneLoaded td {
-     text-align: center !important;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
@@ -863 +879 @@
      display: inline-block;
      padding: 10px;
+     opacity: 0.85;
 }
 
@@ -871 +888 @@
      margin: 1px 4px 0 0 !important;
      transform: scale(0.95);
+     opacity: 0.85;
 }
 
@@ -930 +948 @@
 }
 
-.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+.snarkTorrents tr:hover, .snarkDirInfo tr:hover, #trackerselect tr:nth-child(n+2):hover td {
      background: #fff !important;
-     background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important;
+     background: linear-gradient(to bottom, #fff, #ffe) !important;
 }
 
@@ -1028 +1046 @@
 
 .percentBarOuter {
+     margin: 0 auto;
+     border: 1px solid #99f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px 0 rgba(196,196,196,0.8);
      background: #eef;
      background: repeating-linear-gradient(135deg, #eef 1px, #eef 5px, #ddf 6px, #ddf 11px);
-     border: 1px solid #99f;
-     box-shadow: 0 0 1px 0 rgba(196,196,196,0.8);
-     margin: 0 auto;
 }
 
@@ -1044 +1063 @@
 
 .percentBarInner {
+     height: 14px;
      border: none;
-     height: 14px;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #ddf;
      background: #bbf;
-     background: linear-gradient(to bottom, #fff 0%, #eef 50%, #bbf 50%, #99f 100%);
-     box-shadow: inset 0 0 0 1px #ddf;
+     background: linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f);
+     background: linear-gradient(to right, rgba(255,255,0,0.1) 60px, rgba(0,255,0,0.1)), linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f);
      opacity: 0.8;
+}
+
+.peerinfo .percentBarInner {
+     background: linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f);
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to right, rgba(255,255,0,0.1) 40px, rgba(0,255,0,0.1)), linear-gradient(to bottom, #fff, #eef 50%, #bbf 50%, #99f);
 }
 
@@ -1093 +1122 @@
 }
 
-.thumb:hover {
+.snarkDirInfo td:first-child .thumb:hover, .snarkDirInfo td:first-child .thumb:focus {
      max-width: 96px;
      max-height: 64px;
      transition: ease all 0.3s;
-     margin: -6px 0 -6px -4px !important;
+     margin: -9px 0 -9px -5px !important;
      filter: none !important;
+     border: 1px solid transparent !important;
+     background: none !important;
+     box-shadow: none !important;
 }
 
@@ -1106 +1138 @@
 
 .snarkAddInfo {
+     display: inline-block;
+     margin: 3px 0 -3px -5px !important;
+     padding-left: 26px;
+     line-height: 130% !important;
      font-size: 9pt;
-     line-height: 130% !important;
-     margin-left: -5px;
      font-weight: normal;
      background: url(images/infocircle.png) left 10px center no-repeat;
      background-size: 13px auto;
-     padding-left: 26px;
 }
 
 .snarkConfigTitle:hover, label.toggleview:hover, input.toggle_input:focus + .toggleview {
-     background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background: linear-gradient(to bottom, #eff2ff, #fff) !important;
      color: #f60 !important;
 }
@@ -1125 +1158 @@
 
 .snarkConfigTitle:active, label.toggleview:active {
-     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #99a, 0 0 0 0 #fff;
 }
 
@@ -1140 +1173 @@
      border: 1px solid #89f;
      border-top: none;
+     border-radius: 0 0 4px 4px;
      background: #fff !important;
-     background: linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
-     box-shadow: inset 0 0 0 1px #fff;
-     filter: drop-shadow(0 1px 1px #ddd);
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important;
+     box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 0 #fff, 0 1px 1px #ddf;
+     transition: ease all 0.2s;
 }
 
@@ -1149 +1183 @@
      display: inline-block;
      width: 100%;
-     margin-bottom: -1px;
+}
+
+.iframed .snarkConfigTitle a {
+     padding-bottom: 0;
 }
 
@@ -1163 +1200 @@
 
 .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
-     color: #444 !important;
+     color: #676788 !important;
+}
+
+.configsection .snarkConfigTitle {
+     margin-bottom: -2px !important;
 }
 
@@ -1172 +1213 @@
 
 .snarkConfigTitle a, .snarkConfigTitle a:visited, label.toggleview {
-     color: #444688 !important;
      outline: none;
+     color: #676799 !important;
+     text-shadow: 0 1px 1px #fff;
 }
 
 .snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, .toggleview:focus {
      color: #f60 !important;
-}
-
-.snarkConfigTitle a:active, .toggleview:active {
+     text-shadow: none;
+     transition: ease all 0.2s;
+}
+
+.snarkConfigTitle a:active, input:active + .toggleview {
      color: #f90 !important;
 }
@@ -1221 +1265 @@
      word-wrap: break-word;
      opacity: 1;
-     color: #33a;
+     color: #4f509f;
      border-radius: 0;
 }
@@ -1228 +1272 @@
      font-weight: normal;
      text-decoration: none;
-     color: #448;
+     color: #7d7edf;
 }
 
@@ -1289 +1333 @@
 input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus {
      outline: none !important;
-     filter: drop-shadow(0 0 2px #f60) !important;
+     filter: drop-shadow(0 0 1px #f60) !important;
 }
 
@@ -1307 +1351 @@
      border-radius: 2px;
      background: #eee;
-     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: linear-gradient(to bottom, #fff, #ddd);
      box-shadow: inset 0 0 0 1px #fff;
      filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.8));
@@ -1316 +1360 @@
      color: #111;
      background: #fff;
-     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     background: linear-gradient(to bottom, #ddd, #fff);
      border: 1px solid #89f;
 }
@@ -1395 +1439 @@
      border-radius: 2px;
      box-shadow: inset 1px 1px 1px #ddd;
+     background: #f8f8ff;
 }
 
@@ -1499 +1544 @@
      border: 1px solid #bbb;
      border-radius: 2px;
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
      -moz-appearance: none;
      -webkit-appearance: none;
@@ -1512 +1557 @@
 
 select:hover, select:active {
-     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
 }
 
 select:focus {
-     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
      box-shadow: 0 0 0 1px #89f;
      color: #000;
@@ -1534 +1579 @@
 
 select[disabled], select[disabled]:hover {
-     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
      opacity: 0.7;
      cursor: not-allowed;
@@ -1544 +1589 @@
 
 textarea {
-     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font: 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      font-weight: bold;
      padding: 1px 4px 0;
@@ -1582 +1627 @@
      border-radius: 2px;
      background: #fff;
-     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%);
+     background: linear-gradient(to bottom, #fff 50%, #ddf 50%);
      box-shadow: inset 0 0 1px 1px #fff;
      filter: drop-shadow(0 0 1px #aaa) !important;
@@ -1594 +1639 @@
 
 #pagenav a:active img {
-     background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%);
+     background: linear-gradient(to bottom, #ddf 50%, #99f 50%);
      box-shadow: inset 2px 2px 2px 1px #99f;
 }
@@ -1625 +1670 @@
      width: calc(100% - 150px) !important;
      margin: 2px 5px 0 5px;
+     border-collapse: separate;
      border: 1px solid #89f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #ccf;
      background: rgba(255,255,255,0.1);
 }
@@ -1648 +1696 @@
      font-weight: bold;
      border-bottom: 1px #89f;
-     background: linear-gradient(to bottom, #eef, #fff);
 }
 
 #trackerselect tr:first-child td {
      padding: 5px 10px;
+     font-weight: bold !important;
      border-bottom: 1px solid #89f;
-     font-weight: bold !important;
+     background: linear-gradient(to bottom, #fff, #eef);
 }
 
@@ -1662 +1710 @@
 
 #trackerselect td:first-child, #trackerselect td:last-child {
-     width: 40%;
+     width: 35%;
      font-weight: normal;
+}
+
+#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
+     width: 15%;
 }
 
@@ -1708 +1760 @@
 .knownTracker input[type="radio"]:checked, .knownTracker input[type="radio"]:checked:hover {
      opacity: 0.5;
-}
-
-.snarkTorrentNoneLoaded td {
-     color: #0c153d !important;
-     background: #fff;
 }
 
@@ -1826 +1873 @@
      color: #0c153d;
      border: 1px solid #89f;
-     box-shadow: inset 0 0 2px 0 #ccc, 0 0 1px #bbb;
      word-wrap: break-word;
      background: #fff;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection {
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #fff;
+     background-blend-mode: luminosity;
+}
+
+.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection {
+     border-radius: 0;
 }
 
@@ -1835 +1891 @@
      padding: 0;
      border-bottom: none;
-     background: repeating-linear-gradient(to right, #ddf 2px, #eef 2px, #ddf 4px);
+     background: none;
 }
 
 .newtorrentsection {
-     margin: 0 0 10px 0;
+     margin: 0 0 9px 0;
      padding: 0 10px;
-     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background: #eef url(images/snark_create.png) no-repeat scroll right center;
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #f8f8ff, #eef);
      background-size: 68px 68px, 100% 100%;
 }
 
 .addtorrentsection {
-     margin: 10px 0;
+     margin: 9px 0;
      padding: 0 10px;
-     background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background: #eef url(images/snark_add.png) no-repeat scroll 99.5% center;
+     background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #f8f8ff, #eef);
      background-size: 61px 61px, 100% 100%;
 }
@@ -1855 +1913 @@
      margin: 0;
      padding: 0 10px 12px 10px;
-     background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background: #eef url(images/configuration.png) no-repeat scroll 101% center;;
+     background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #f8f8ff, #eef);
      background-size: 68px 68px, 100% 100%;
 }
@@ -1866 +1925 @@
      margin: 9px 0 0 0;
      padding: 0;
-     background: linear-gradient(to bottom, #fff 0%, #eef 40px, #fff 100%);
+     background: linear-gradient(to bottom, #fff, #eef 40px, #fff);
 }
 
@@ -1903 +1962 @@
 
 code {
-     font: bold 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font: bold 8pt "Droid Sans Mono", "Noto Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      padding: 0 2px;
      color: #050;
@@ -1914 +1973 @@
 }
 
-.routerdown {
-     padding: 10px;
-     color: #0c153d;
-     border-bottom: 1px solid #89f;
-     box-shadow: inset 0 0 0 1px #fff;
-}
-
 input.trackername {
      width: 100px;
@@ -1956 +2008 @@
 }
 
-/* display panels by default on webkit based browsers (midori fix) */
-/*
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-input#toggle_addtorrent:not(checked) + label + hr + table,
-input#toggle_createtorrent:not(checked) + label + hr + table {
-     display: table;
-}
-
-input#toggle_addtorrent:checked + label + hr + table,
-input#toggle_createtorrent:checked + label + hr + table {
-     display: none;
-}
-}
-*/
-
 /* display by default in iframe to avoid overflow issue */
 .iframed input#toggle_addtorrent:not(checked) + label + hr + table,
@@ -1982 +2019 @@
 }
 
-label.toggleview, .snarkConfigTitle a:visited {
-     color: #006;
-}
-
-label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
-     color: #f90;
+.toggleview img, .configsection img {
+     mix-blend-mode: luminosity;
+}
+
+label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img, input:focus + .toggleview img {
      filter: drop-shadow(0 0 1px #f60);
+     mix-blend-mode: normal;
 }
 
@@ -2067 +2104 @@
 
 #dhtdebugPanel {
-     background: linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background: linear-gradient(to bottom, #fff, #eef);
      box-shadow: 0 0 2px 0 #ccc inset, 0 0 1px #bbb;
      border: 1px solid #89f;
@@ -2128 +2165 @@
 hr.debug {
      width: 100%;
-     background: #89f;
-     background: linear-gradient(to right, #89f 40%, #eef);
+     background: #ccf;
+     background: linear-gradient(to right, #ccf 40%, #eef);
      color: #efefff;
      border: none;
@@ -2626 +2663 @@
 
 @media screen and (max-width: 1400px) {
-
 .percentBarText {
      line-height: 15px;
+}
+}
+
+@media screen and (max-width: 1500px) {
+.snarkTorrents thead img, .snarkDirInfo th img {
+     max-height: 20px !important;
 }
 }
@@ -2663 +2705 @@
 }
 
+.snarkTorrentAction {
+     padding-left: 4px !important;
+     padding-right: 4px !important;
+}
+
 .snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
      padding: 4px !important;
@@ -2729 +2776 @@
 .percentBarText {
      font-size: 8pt !important;
-}
-
-.snarkTorrentDetails {
-     padding-left: 8px;
 }
 

installer/resources/themes/snark/dark/snark.css

@@ -7 +7 @@
 
 body {
-     margin: 9px 8px;
+     margin: 5px 3px;
      color: #ee9;
      font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
@@ -54 +54 @@
      background: #000;
      background: repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px);
+     background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), repeating-linear-gradient(135deg, #010, #010 10px, #020 10px, #020 20px, #010 20px);
+     background-blend-mode: darken, darken, normal;
 }
 
@@ -90 +92 @@
 
 .snarknavbar {
+     min-width: 888px;
+     z-index: 999;
+     position: sticky;
+     top: -1px;
      margin: 0 0 -6px !important;
      padding: 9px 0 8px;
-     background: #010 !important;
-     background-image: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important;
-     min-width: 888px;
      text-align: center;
      border: 1px solid #494;
-     position: sticky;
-     top: -1px;
-     z-index: 999;
+     box-shadow: inset 0 0 0 1px #000;
+     box-shadow: inset 0 0 0 2px #000, inset 0 0 10px 3px rgba(0,8,0,0.7);
+     background: #010 !important;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 2px, #010 2px, #010 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, #010 2px, #010 4px), linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 52%, #010301 53%, #000000 56%, #000000 100%), url(/themes/console/dark/images/camotile2.png) top left !important;
+     background-blend-mode: exclusion, exclusion, normal, normal;
 }
 
 .iframed .snarknavbar {
      margin-top: -2px !important;
+     padding: 7px 0;
      position: static;
+     box-shadow: inset 0 0 0 1px #000;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 51%, #020602 52%, #010301 55%, #000000 57%), url(/themes/console/dark/images/camotile2.png) top left !important;
+}
+
+_:-ms-lang(x), .snarknavbar {
+     background: linear-gradient(to bottom, #001000, #001900 51%, #000 51%) !important;
 }
 
 .snarkNav:link, .snarkNav:visited {
      display: inline-block;
+     line-height: 120%;
      font-size: 9pt;
      font-weight: bold;
@@ -114 +127 @@
      text-transform: uppercase !important;
      letter-spacing: 0.1em;
-     margin: 0 -2px !important;
-     padding: 5px 7px 5px 22px !important;
+     margin: 0 -1px 0 -2px !important;
+     padding: 4px 7px 4px 22px !important;
      color: #3f3;
      text-shadow: 0 0 1px #000;
@@ -121 +134 @@
      border: 1px solid #494;
      box-shadow: inset 0 0 0 1px #000;
-     filter: drop-shadow(0 0 1px #000);
-     opacity: 0.7;
+     filter: drop-shadow(0 0 2px #000);
+     opacity: 0.75;
      position: relative;
 }
@@ -130 +143 @@
      background-position: 7px center !important;
      background-repeat: no-repeat, repeat !important;
+     filter: drop-shadow(0 0 1px #000);
 }
 
 .snarkNav:hover, .snarkNav:focus {
      z-index: 10;
+     opacity: 1 !important;
 }
 
@@ -181 +196 @@
 
 .snarkNav:link:active, .snarkNav:active {
-     box-shadow: inset 3px 3px 3px #000 !important;
+     box-shadow: inset 3px 3px 3px 3px #3f1a04 !important;
      color: #fff !important;
-     border: 1px solid #fff !important;
      text-shadow: none;
      background-size: 14px auto !important;
      background-repeat: no-repeat !important;
+     filter: none;
+     transition: ease box-shadow 0.1s;
 }
 
@@ -201 +217 @@
 }
 
-.snarkNav:link:last-of-type {
+.nav_main.snarkNav:last-child {
      border-radius: 2px !important;
-}
-
-.snarkNav:link[target="_blank"]:last-child {
-     border-radius: 0 2px 2px 0 !important;
 }
 
@@ -222 +234 @@
 
 .snarkMessages {
-     font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     margin: 0;
+     padding: 3px 5px;
+     width: auto;
+     height: 54px;
+     resize: none;
+     overflow: hidden;
      line-height: 120%;
      text-align: left;
-     margin: 0;
-     padding: 3px 5px;
-     overflow: hidden;
-     resize: none;
+     font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
      color: #69f;
-     height: 56px;
-     width: auto;
+     box-shadow: inset 0 0 0 1px #000;
+     border-bottom: 1px solid #494;
      background: #000 url(images/hat.png) no-repeat scroll right bottom;
      background: url(images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000);
-     border-bottom: 1px solid #494;
+     background-size: auto 95%, 100% 100%;
      background-blend-mode: screen;
 }
@@ -348 +362 @@
 
 thead th {
-     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%) !important;
+     background: none;
+}
+
+.iframed thead th {
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important;
+
+}
+
+thead {
+     background: linear-gradient(to bottom, #003000, #000 75%) !important;
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important;
 }
 
@@ -359 +383 @@
      text-align: left !important;
      padding-left: 0;
-}
-
-th:first-child img {
-     margin: 1px -2px 3px 1px !important;
 }
 
@@ -385 +405 @@
      border-right: 0 !important;
      text-align: left !important;
-     padding: 4px 0;
-}
+     padding: 4px 0 4px 5px;
+}
+
 .ParentDir a {
      font-weight: bold !important;
-     margin-left: -4px;
 }
 
@@ -441 +461 @@
 }
 
-.snarkTrackerDetails, .SnarkTorrentDetails {
+.snarkTrackerDetails, .snarkTorrentDetails {
      width: 16px !important;
-     padding: 0 !important;
      text-align: center !important;
-}
-
-.snarkTrackerDetails {
-     text-align: right !important;
+     font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     padding: 3px !important;
+     border: 1px solid transparent !important;
+     margin: 0 !important;
+}
+
+.snarkDirInfo td:first-child img {
+     margin: 0 2px !important;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #f60 !important;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #f60;
+     background: #030;
+     background: linear-gradient(to bottom, #030 50%, #010 50%);
+     filter: none !important;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     border: 1px solid #f90 !important;
+     box-shadow: inset 2px 2px 3px 3px #000;
+     transform: scale(0.9);
 }
 
@@ -528 +573 @@
 }
 
+.snarkTorrentInfo tr:nth-last-child(n+2) b {
+     margin-right: 2px;
+}
+
 .snarkTorrentInfo input[type="submit"] {
      min-width: 85px;
 }
 
-#torrentInfoControl, #setPriority {
-     border-top: 1px solid #494 !important;
-     background: none !important;
-}
-
 #torrentInfoControl td, #setPriority th {
      text-align: right !important;
-     padding: 10px 8px !important;
+     padding: 11px 8px 10px !important;
      background: none !important;
      box-shadow: inset 0 0 0 1px #030;
+}
+
+#setPriority th {
+     padding: 13px 8px 10px !important;
 }
 
@@ -614 +662 @@
 }
 
-#setPriority, #torrentInfoControl {
+#setPriority, #torrentInfoControl, .commentAction[colspan="5"] {
      background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), url(/themes/console/dark/images/camotile2.png) top left repeat !important;
+     background-blend-mode: exclusion, darken, normal;
+     border-top: 1px solid #494 !important;
      border-bottom: 1px solid #494 !important;
+}
+
+_:-ms-lang(x), #setPriority, #torrentInfoControl {
+     background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important;
 }
 
@@ -741 +796 @@
 
 .snarkTorrentStatus {
-     padding: 3px 5px 3px 0 !important;
+     padding: 3px 5px 3px 1px !important;
      line-height: 90%;
      min-width: 0;
@@ -780 +835 @@
 }
 
+.snarkTorrents thead tr:hover, .snarkDirInfo thead tr:hover {
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%) !important;
+}
+
 tr:hover .percentBarText {
      opacity: 1;
@@ -798 +857 @@
 }
 
-/*
-.snarkTorrents a:hover, .snarkDirInfo a:hover {
-     color: #f40 !important;
-}
-*/
-
 .snarkTorrentEven, .snarkTorrentEven:nth-child(even) {
      background: #001000;
@@ -838 +891 @@
 
 .snarkFileName {
-     padding: 4px 5px 4px 0 !important;
+     padding: 4px 5px 4px 3px !important;
      text-align: left !important;
      word-break: break-all;
@@ -900 +953 @@
      background: #000;
      background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
+     background: linear-gradient(to right, rgba(0,16,0,0.1), rgba(128,255,0,0.1)), repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
      border: 1px solid #040;
      border-bottom: 1px solid #020;
      border-right: 1px solid #020;
+     border-radius: 2px;
      opacity: 1;
      box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
@@ -916 +971 @@
      background: #0e5f00;
      background: linear-gradient(to bottom, rgba(28, 148, 58, 0.6) 0%, rgba(9, 47, 16, 0.6) 50%, rgba(13, 39, 7, 0.6) 50%, rgba(9, 27, 5, 0.6) 50%, rgba(9, 21, 3, 0.6) 100%);
+     border-radius: 2px;
      box-shadow: inset 0 0 0 1px #000;
 }
@@ -930 +986 @@
 
 .percentBarText {
+     height: 1em;
+     line-height: 1;
      text-align: center;
      font-weight: bold;
-     padding: 0.5px 0 0;
+     margin-left: -3px;
+     padding: 0 4px 0 2px;
      white-space: nowrap;
      display: block;
@@ -939 +998 @@
      text-shadow: 0 0 1px rgba(0,0,0,0.8);
      transition: ease opacity 0.2s;
+
 }
 
@@ -988 +1048 @@
      background-size: 14px auto;
      padding-left: 20px;
-     line-height: 140%;
+     line-height: 160%;
 }
 
@@ -998 +1058 @@
      letter-spacing: 0.2em;
      border: 1px solid #494;
-     border-radius: 0;
+     border-radius: 0 0 2px 2px;
      border-top: none;
      background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
-     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%) !important;
      font-variant: small-caps !important;
      display: inline-block;
@@ -1031 +1091 @@
      width: 100%;
      padding-bottom: 1px !important;
+     transition: ease all 0.1s;
 }
 
@@ -1036 +1097 @@
      background: #000 !important;
      background: linear-gradient(to bottom, #001000 50%, #000 50%) !important;
-}
-
-.snarkConfigTitle:hover a {
+     mix-blend-mode: exclusion !important;
+     transition: ease all 0.1s;
+}
+
+.snarkConfigTitle:hover a, .snarkConfigTitle a:focus {
      color: #f60 !important;
+     transition: ease all 0.1s;
 }
 
 .snarkConfigTitle:active, .toggleview:active {
-     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #000;
+     box-shadow: inset 3px 3px 3px 3px #000, 0 0 0 1px #000;
+     transition: ease all 0.1s;
 }
 
@@ -1050 +1115 @@
      margin-bottom: 2px;
      vertical-align: middle;
+     filter: sepia(1) hue-rotate(70deg);
 }
 
@@ -1063 +1129 @@
      transform: rotate(90deg);
      transition: ease transform 0.3s;
+}
+
+.toggle_input:focus + label > img, .snarkConfigTitle a:focus img {
+     filter: drop-shadow(0 0 1px #f60) !important;
 }
 
@@ -1078 +1148 @@
      filter: none;
      box-shadow: inset 0 0 0 1px #000;
+     mix-blend-mode: normal !important;
 }
 
@@ -1211 +1282 @@
 input[type=image], thead img {
      padding: 0 !important;
-     border-radius: 3px;
+     border-radius: 0;
      border: 0 none transparent !important;
      margin: 0 2px;
@@ -1234 +1305 @@
 
 .snarkTorrentAction input[type="image"] {
-     border: 1px solid #151 !important;
      margin: 0 2px !important;
      padding: 4px !important;
+     height: 9px;
+     border: 1px solid #151 !important;
+     border-radius: 3px;
+     box-shadow: inset 0 0 0 1px #000;
      background: #030;
-     background: linear-gradient(to bottom, #030 0%, #030 50%, #010 50%, #010 100%);
-     box-shadow: inset 0 0 0 1px #000;
-     border-radius: 2px;
-     height: 9px;
+     background: linear-gradient(to bottom, #030 50%, #010 50%);
 }
 
 .snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus {
      border: 1px solid #f60 !important;
+     background: #060;
+     background: linear-gradient(to bottom, #060 50%, #010 50%);
+     filter: saturate(150%) drop-shadow(0 0 1px #930) !important;
 }
 
@@ -1258 +1332 @@
      padding: 4px 5px !important;
      background: #000;
-     background: linear-gradient(to bottom, #000 0%, #010 100%);
+     background: linear-gradient(to bottom, #000, #010);
      box-shadow: inset 0 0 3px 3px #000;
      outline: none;
@@ -1746 +1820 @@
      background: url(images/snark_create.png) center right no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
      background-size: 80px 80px, 100% 100%, 175px 175px;
+     background-blend-mode: soft-light, normal, normal;
 }
 
@@ -1768 +1843 @@
      background: #000 url(images/configuration.png) no-repeat scroll right center;
      background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), repeating-linear-gradient(45deg, #000 1px, #000 2px, rgba(0,200,0,0.5) 2px, rgba(0,200,0,0.5) 4px), linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+     background-blend-mode: darken, darken, normal, normal;
 }
 
@@ -2326 +2403 @@
 
 .snarkCommentInfo th, .snarkComments th {
-     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%);
+     background: linear-gradient(to bottom, #003000, #000 75%);
+     background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%);
      padding: 8px 5px;
      white-space: normal;
@@ -2343 +2421 @@
 .snarkCommentInfo th {
      padding: 8px 5px 8px 30px;
-     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%);
+     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, #003000, #000 75%);
+     background: url(images/comment.png) 8px center no-repeat, linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 50%), repeating-linear-gradient(to right, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px, rgba(0,16,0,0.5) 2px, rgba(0,16,0,0.5) 4px), linear-gradient(to bottom, #004000, #000 75%);
 }
 
@@ -2604 +2683 @@
      margin-top: 4px;
 }
+
+.addtorrentsection .toggleview {
+     padding-bottom: 5px !important;
+}
+
+.configsection .snarkConfigTitle {
+     padding-bottom: 4px !important;
+}
 }
 
@@ -2702 +2789 @@
 
 .snarkConfigTitle a {
-     padding-bottom: 2px !important;
+     padding-bottom: 1px !important;
 }
 
@@ -2711 +2798 @@
 }
 
-.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
+.snarkTorrents thead th::before {
+     content: "";
+     display: inline-block;
+     min-height: 18px;
+}
+
+.snarkTorrents thead img {
+     margin: 0 1px 3px !important;
+}
+
+.snarkTorrentAction {
+     padding: 1px 3px !important;
+}
+
+.snarkTorrentAction input[type="image"] {
      height: 11px;
+     margin: 1px 2px !important;
 }
 
@@ -2721 +2823 @@
 .snarkTorrents .snarkTorrentName {
      padding-left: 5px;
+}
+
+.snarkTorrentName:hover a, .snarkFileName:hover a {
+     margin: -2px 0 -2px -2px;
+     padding: 3px 3px 3px 5px;
+     background: rgba(0,16,0,0.3);
+     border: 1px solid #002000;
+     border-radius: 2px 20px 20px 2px;
+     box-shadow: inset 2px 2px 2px rgba(0,8,0,0.5);
+}
+
+.snarkFileName:hover a {
+     margin-left: -5px;
+     padding-right: 0;
+}
+
+.snarkTorrentName:active a, .snarkFileName:active a {
+     border: 1px solid #930;
+     box-shadow: inset 4px 4px 4px rgba(0,8,0,0.8);
 }
 
@@ -2804 +2925 @@
 .snarkTorrentName a:not(old) {
      max-width: 360px !important;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
 }
 
@@ -2816 +2940 @@
 .percentBarText {
      font-size: 8pt !important;
+     line-height: 1;
+     padding: 1px 0;
 }
 
@@ -2848 +2974 @@
 }
 
+.toggleview, .snarkConfigTitle, .configsection .snarkConfigTitle {
+     padding-bottom: 3px !important;
+}
+
+.addtorrentsection .toggleview {
+     padding-bottom: 2px !important;
+}
+
+.snarkConfigTitle a {
+     padding-bottom: 0 !important;
+}
+
 .toggleview img, .snarkConfigTitle img {
-     height: 12px;
+     height: 14px;
      margin-right: 0 !important;
 }

installer/resources/themes/snark/light/snark.css

@@ -9 +9 @@
      background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed;
      background-size: 32px 32px;
-     margin: 5px;
+     margin: 3px 4px;
 }
 
@@ -143 +143 @@
      filter: drop-shadow(0 0 1px #ccf);
      position: relative;
+     transition: ease all 0.1s;
 }
 
@@ -148 +149 @@
      background-size: 14px auto, 100% 100% !important;
      background-position: 8px center;
+     transition: ease all 0.1s;
 }
 
@@ -168 +170 @@
 }
 
+.iframed .nav_main {
+     background: url(images/button_snark.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff;
+}
+
 .nav_forum {
      background: #fff url(images/button_forum.png) 8px center no-repeat;
@@ -173 +179 @@
 }
 
+.iframed .nav_forum {
+     background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff;
+}
+
 .nav_tracker {
      background: #fff url(images/button_tracker.png) 8px center no-repeat;
      background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+}
+
+.iframed .nav_tracker {
+     background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4)) #e7e7ff;
 }
 
@@ -272 +286 @@
      background: rgba(255, 255, 255, 0.25);
      opacity: 0.9;
-     mix-blend-mode: darken;
-}
-
-.snarkMessages li:hover {
-     opacity: 1;
      mix-blend-mode: multiply;
 }
@@ -309 +318 @@
 }
 
+#closelog {
+     position: relative;
+     z-index: 999;
+}
+
 .logshim {
      margin-top: 11px !important;
@@ -534 +548 @@
 }
 
-.snarkTrackerDetails, .SnarkTorrentDetails {
+.snarkTrackerDetails, .snarkTorrentDetails {
      width: 16px !important;
-     padding: 2px 1px 2px 0;
-}
-
-.SnarkTorrentDetails {
-     text-align: center;
+     text-align: center !important;
+     font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     margin: 0;
+     padding: 3px !important;
+     border: 1px solid transparent !important;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #f60 !important;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #f60;
+     background: #ddf;
+     background: linear-gradient(to bottom, #fff 50%, #ddf 50%);
+     filter: none !important;
+     mix-blend-mode: normal;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     box-shadow: inset 2px 2px 2px #99f;
 }
 
@@ -637 +672 @@
 .snarkTorrentUploaded, .snarkTorrentRateUp {
      font-style: italic !important;
-     color: #59698f !important;
 }
 
@@ -705 +739 @@
 .snarkCommentInfo tr:nth-child(odd), .snarkComments tr:nth-child(even) {
      background: #e0e0ff;
-     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #fafaff 5px) #fafaff;
+     background: repeating-linear-gradient(45deg, rgba(240,240,255,0.8) 2px, rgba(196, 196, 255, 0.3) 3px, #f6f6ff 5px) #f6f6ff;
 }
 
@@ -789 +823 @@
      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);
      border: 1px solid #99f;
+     border-radius: 2px;
      box-shadow: 0 0 1px rgba(200,200,200,0.8);
      margin: 0 auto;
@@ -795 +830 @@
 .percentBarInner {
      border: none;
+     border-radius: 2px;
      height: 100%;
+     box-shadow: inset 0 0 0 1px #ddf;
      background: #bbf;
+     background: linear-gradient(to right, rgba(255,255,0,0.1) 60px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%);
+}
+
+.peerinfo .percentBarInner {
      background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%);
-     box-shadow: inset 0 0 0 1px #ddf;
+}
+
+.snarkDirInfo .percentBarInner {
+     background: linear-gradient(to right, rgba(255,255,0,0.1) 40px, rgba(0,255,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(200, 200, 255, 0.7) 50%, rgba(160, 160, 255, 0.7) 100%);
 }
 
@@ -887 +931 @@
      width: 100%;
      margin-top: -1px;
+     transition: ease all 0.1s;
 }
 
 .snarkConfigTitle:hover a, .snarkConfigTitle:focus a {
      color: #f60 !important;
+     transition: ease all 0.1s;
 }
 
@@ -901 +947 @@
      border: 1px solid #7778bf;
      border-top: 0;
+     border-radius: 0 0 3px 3px;
      background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center;
      background: linear-gradient(to bottom, #fff 50%, #eef 51%);
      font-variant: small-caps !important;
-     box-shadow: 0 1px 2px #ccf;
+     box-shadow: 0 1px 2px #ccf, inset 0 0 0 1px #fff, inset 0 0 0 1px #fff;
      display: inline-block;
      min-width: 260px;
      color: #559 !important;
+     transition: ease all 0.1s;
+}
+
+.iframed .snarkConfigTitle, .iframed .toggleview, .iframed .configsectionpanel .snarkConfigTitle:hover {
+     background: #e7e7ff linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 255, 0.4));
 }
 
@@ -937 +989 @@
 .snarkConfigTitle:active, .toggleview:active {
      color: #f30 !important;
-     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558;
+     box-shadow: 0 0 0 0 #fff, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #558;
+     transition: ease all 0.1s;
 }
 
@@ -1094 +1147 @@
      text-align: center;
      box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
+     text-shadow: 0 1px 1px #fff;
      filter: drop-shadow(0px 0 1px #ccf);
 }
@@ -1103 +1157 @@
      background: linear-gradient(#fff 50%, #ffe8bf 50%, #efd9b3 100%);
      box-shadow: inset 0 0 0 1px #fff;
+     text-shadow: none;
 }
 
@@ -1128 +1183 @@
 }
 
-a.control img {
-     filter: none;
-}
+a.control img, a.control:hover img, a.control:focus img, a.control:active img {
+     filter: none !important;
+}
+
+/* sync iframe buttons with main console theme */
+
+.iframed input[type="submit"], .iframed a.control {
+     color: #41465f;
+     font-weight: normal;
+     border: 1px solid #999daf;
+     background: linear-gradient(to bottom, #fff, #efefff);
+     transition: ease border 0.7s;
+}
+
+.iframed input[type="submit"]:hover, .iframed input[type="submit"]:focus, .iframed a.control:hover, .iframed a.control:focus {
+     color: #19191f;
+     border: 1px solid #f60;
+     background: linear-gradient(to bottom, #eee, #fff);
+     transition: ease border 0.7s;
+}
+
+.iframed input[type="submit"]:active, .iframed a.control:active {
+     color: #4c526f !important;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555 !important;
+     background: linear-gradient(to bottom, #eee, #fff) !important;
+     background-blend-mode: luminosity;
+}
+
+.iframed a.control:active img {
+     mix-blend-mode: luminosity;
+}
+
+/* end iframed button sync */
 
 input[type=image], thead img {
@@ -1368 +1453 @@
      padding: 0 10px;
      border: 1px solid #7778bf;
-     color: #001;
-     box-shadow: inset 0 0 0 1px #efefff;
+     box-shadow: inset 0 0 0 1px #fff;
      background-blend-mode: luminosity;
      text-align: center;
@@ -1379 +1463 @@
      background: url(images/snark_create.png) no-repeat right center, linear-gradient(to bottom, #fafaff, #e0e0ef);
      background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px);
      background-size: 80px 80px, 100% 100%;
 }
@@ -1386 +1471 @@
      background: #fff url(images/snark_add.png) no-repeat right 15px center;
      background: url(images/snark_add.png) no-repeat right 15px center, linear-gradient(to bottom, #fafaff, #e0e0ef);
-     background: url(images/snark_add.png) no-repeat scroll right 15px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background: url(images/snark_add.png) no-repeat scroll right 15px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px);
      background-size: 61px 61px, 100% 100%;
 }
@@ -1395 +1480 @@
      background: #fff url(images/configuration.png) right -25px center no-repeat;
      background: url(images/configuration.png) right -25px center no-repeat, linear-gradient(to bottom, #fafaff, #e0e0ef);
-     background: url(images/configuration.png) no-repeat scroll right -25px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fafaff), repeating-linear-gradient(135deg, #fff 2px, rgba(221, 221, 255, 1) 3px, #fafaff 5px);
+     background: url(images/configuration.png) no-repeat scroll right -25px center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 15%, #f4f4ff 85%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px);
      background-size: 84px 82px, 100% 100%;
 }
@@ -1403 +1488 @@
      background: #fff url(images/configuration.png) no-repeat scroll right center;
      background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #fafaff, #e0e0ef);
-     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fafaff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px);
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 5%, #f4f4ff 95%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px);
      background-size: 84px 82px, 100% 100%, 100% 100%;
 }
@@ -1409 +1494 @@
 form:last-child .configsectionpanel {
      margin-top: 10px;
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #f4f4ff 10%, #f4f4ff 90%, rgba(224, 224, 255, 0.5)), repeating-linear-gradient(135deg, #fff 2px, rgba(224, 224, 255, 0.5) 3px, #f4f4ff 5px);
 }
 
@@ -1442 +1528 @@
      min-width: 140px;
      font-weight: bold;
+     color: #41465f;
 }
 
@@ -1469 +1556 @@
      font-weight: bold;
      text-align: center;
+     color: #41465f;
 }
 
@@ -2460 +2548 @@
 .snarkConfigTitle, .toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
      font-size: 12pt !important;
-     padding: 4px 1px 5px !important;
+     padding: 4px 1px 3px !important;
      min-width: 300px;
 }

installer/resources/themes/snark/midnight/snark.css

@@ -104 +104 @@
      font-size: 9pt;
      font-weight: bold;
-     margin: 0 -1px 0 0 !important;
+     margin: 0 -1px 0 -3px !important;
      padding: 5px 7px 5px 26px !important;
      text-decoration: none !important;
@@ -117 +117 @@
      box-shadow: inset 0 0 0 1px #000, 0 0 1px #000;
      text-shadow: 0 0 1px #000;
+     transition: ease all 0.1s;
 }
 
@@ -170 +171 @@
      color: #652787;
      border-color: #652787;
+     position: relative;
+     z-index: 999;
+     transition: ease box-shadow 0.1s;
 }
 
@@ -175 +179 @@
      text-decoration: none !important;
      color: #fff;
-     border: 1px solid #fff;
      background: #652787 url(images/button_tracker_active.png) !important;
      background-repeat: no-repeat !important;
@@ -181 +184 @@
      box-shadow: inset 3px 3px 2px #1f002f;
      text-shadow: none;
+     transition: ease all 0.1s;
 }
 
@@ -490 +494 @@
 }
 
-.snarkTrackerDetails, .SnarkTorrentDetails {
+.snarkTrackerDetails, .snarkTorrentDetails {
      width: 16px !important;
-     padding: 0 !important;
      text-align: center !important;
-}
-
-.snarkTrackerDetails {
-     text-align: right !important;
+     font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     padding: 3px !important;
+     border: 1px solid transparent !important;
+     margin: 0 !important;
+}
+
+.snarkDirInfo td:first-child img {
+     margin: 0 2px !important;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #652787 !important;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #652787;
+     background: #003;
+     background: linear-gradient(to bottom, #007 50%, #001 50%);
+     filter: none !important;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     border: 1px solid #f90 !important;
+     box-shadow: inset 2px 2px 3px 3px #000;
+     transform: scale(0.9);
 }
 
@@ -1015 +1044 @@
      background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px);
      border: 1px solid #171c3f;
+     border-radius: 2px;
      box-shadow: none;
      box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
@@ -1029 +1059 @@
      background: #33a;
      background: linear-gradient(to bottom,  #33a 0%, #226 50%, #003 50%, #000 100%);
+     border-radius: 2px;
      box-shadow: inset 0 0 0 1px #000;
      opacity: 0.8;
@@ -1128 +1159 @@
      letter-spacing: .15em;
      border: 1px solid #443da0;
+     border-radius: 0 0 2px 2px;
      background: #003;
      background: linear-gradient(to bottom, #191729, #1f1e32 50%, #000 50%);
      box-shadow: inset 0 0 0 1px #000;
      text-shadow: 0 0 1px #000;
+     transition: ease all 0.1s;
 }
 
@@ -1141 +1174 @@
      display: inline-block;
      margin-top: -1px;
+     transition: ease all 0.1s;
+}
+
+.snarkConfigTitle:hover a {
+     transition: ease all 0.1s;
 }
 
@@ -1146 +1184 @@
      background: #002 !important;
      background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
+     transition: ease all 0.1s;
 }
 
@@ -1151 +1190 @@
      background: #003 !important;
      background: linear-gradient(to bottom, #004 50%, #002 50%) !important;
-     box-shadow: inset 3px 3px 3px #000;
+     box-shadow: inset 3px 3px 3px 3px #002;
+     transition: ease all 0.1s;
 }
 
@@ -1216 +1256 @@
      font-size: 10pt;
      width: 100%;
-}
-
-.snarkConfig i {
-     padding-left: 5px;
 }
 

installer/resources/themes/snark/ubergine/snark.css

@@ -108 +108 @@
 .snarkNav:link, .snarkNav:visited {
      display: inline-block;
+     line-height: 130%;
      text-decoration: none !important;
      text-transform: uppercase !important;
@@ -160 +161 @@
      border: 1px solid #730;
      box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3f1900 !important;
+     transition: ease box-shadow 0.1s;
 }
 
@@ -466 +468 @@
 }
 
+/*
 .snarkTrackerDetails {
      text-align: right;
@@ -471 +474 @@
      min-width: 36px;
 }
+*/
 
 .snarkTorrentName {
@@ -582 +586 @@
 }
 
+.snarkTorrents thead th:nth-child(3) {
+     max-width: 40px !important;
+     overflow: visible;
+     white-space: nowrap;
+}
+
+.snarkTorrents thead th:nth-child(3) img {
+     display: inline-block;
+}
+
 .snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover td {
      background: #212 !important;
@@ -626 +640 @@
 
 .snarkTrackerDetails img {
+     opacity: 0.75;
+}
+
+.snarkTrackerDetails a img:hover, .snarkTrackerDetails a img:focus {
+     opacity: 1;
+}
+
+.snarkTrackerDetails, .snarkTorrentDetails {
+     width: 16px !important;
+     text-align: center !important;
+     font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     padding: 3px !important;
+     margin: 0 1px !important;
      width: 16px;
      height: 16px;
-     opacity: 0.75;
-}
-
-.snarkTrackerDetails a img:hover, .snarkTrackerDetails a img:focus {
-     opacity: 1;
+     border: 1px solid transparent !important;
+     transition: ease all 0.2s;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #f60 !important;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #414;
+     background: #515;
+     background: linear-gradient(to bottom, #717 50%, #414 50%);
+     filter: none !important;
+     transition: ease all 0.2s;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     border: 1px solid #101 !important;
+     box-shadow: inset 3px 3px 3px #313;
+     mix-blend-mode: luminosity;
+     transition: none;
 }
 
@@ -948 +996 @@
 .thumb:hover {
      margin: 0;
+     width: auto !important;
+     height: auto !important;
      max-width: 80px;
      max-height: 80px;
@@ -1140 +1190 @@
      box-shadow: inset 0 0 1px #3f173f;
      color: #d2baff !important;
+     transition: ease all 0.1s;
 }
 
@@ -1160 +1211 @@
      margin: 0 0 -3px !important;
      min-width: 260px;
+     transition: ease all 0.1s;
 }
 

installer/resources/themes/snark/vanilla/nocollapse.css

@@ -8 +8 @@
 
 label.toggleview, label.toggleview:hover, label.toggleview:active, .toggle_input:focus + .toggleview {
-     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%) !important;
+     background: linear-gradient(to bottom, #fff7ef, #cfc1b5) !important;
      color: #930 !important;
      cursor: default !important;

installer/resources/themes/snark/vanilla/snark.css

@@ -140 +140 @@
      box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(111, 96, 90, 0.3), 0 0 1px 1px rgba(79, 61, 54, 0.5);
      background: #efefef;
-     background: linear-gradient(to bottom, #efefef 50%, #cfc7c2 52%, #cfc7c2 100%);
+     background: linear-gradient(to bottom, #efefef 50%, #cfc7c2 53%);
      min-width: 900px;
      width: 70%;
@@ -160 +160 @@
 
 .snarkNav:link, .snarkNav:visited {
-     text-decoration: none !important;
-     text-transform: uppercase !important;
+     display: inline-block;
+     position: relative;
+     z-index: 30;
+     margin: -3px -4px -4px 0 !important;
      padding: 4px 10px 4px 28px !important;
-     margin: -3px -4px -4px 0 !important;
-     letter-spacing: 0.08em;
+     line-height: 130%;
      font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-weight: bold;
      font-size: 10pt;
      color: #3f271b;
+     text-shadow: 0 0 1px #fff5ef;
+     text-decoration: none !important;
+     text-transform: uppercase !important;
+     letter-spacing: 0.08em;
+     border: 1px solid #2f1b0c;
+     border-radius: 0;
+     box-shadow: inset 0 0 0 1px #efe6e0, inset 0 0 0 rgba(0,0,0,0), 0 0 0 1px rgba(77, 69, 62, 0.1);
      background-size: 17px auto, 100% 100%, 100% 100% !important;
      background-position: 12px center, center center, center center !important;
      background-repeat: no-repeat !important;
-     border-radius: 0;
-     border: 1px solid #efe6e0;
-     text-shadow: 0 0 1px #fff5ef;
-     box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1);
-     border: 1px solid #2f1b0c;
-     display: inline-block;
-     position: relative;
-     z-index: 30;
+     transition: ease all 0.1s;
 }
 
@@ -191 +192 @@
      text-shadow: none !important;
      color: #930 !important;
-     box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1);
+     box-shadow: inset 0 0 0 1px #fff5ef, inset 0 0 0 rgba(0,0,0,0), 0 0 0 1px rgba(77, 69, 62, 0.1);
      filter: drop-shadow(0 0 1px rgba(200,60,0,0.2));
      z-index: 10;
+     transition: ease all 0.1s;
 }
 
@@ -221 +223 @@
 .nav_main:hover, .nav_main:focus {
      background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat !important;
-     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%) !important;
+     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%) !important;
      background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
@@ -227 +229 @@
 .nav_forum:hover, .nav_forum:focus {
      background: #ffeadf url(images/button_forum_hover.png);
-     background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background: url(images/button_forum_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%);
 }
 
 .nav_tracker:hover, .nav_tracker:focus {
      background: #ffeadf url(images/button_tracker_hover.png);
-     background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background: url(images/button_tracker_hover.png), linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%);
 }
 
 .nav_main:active {
      background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat !important;
-     background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%) !important;
+     background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%) !important;
      background-size: 18px auto, 100% 100%, 100% 100% !important;
 }
@@ -243 +245 @@
 .nav_forum:active {
      background: #dfb899 url(images/button_forum_active.png);
-     background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
+     background: url(images/button_forum_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%);
 }
 
 .nav_tracker:active {
      background: #dfb899 url(images/button_tracker_active.png);
-     background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
+     background: url(images/button_tracker_active.png), linear-gradient(to bottom, #dfb899 47%, #af9178 50%);
 }
 
@@ -271 +273 @@
 .snarkNav:active, .snarkNav:visited:active {
      color: #eee !important;
+     transition: ease box-shadow 0.1s;
 }
 
@@ -290 +293 @@
      width: auto;
      background: #3f3833 url(images/hat.png) no-repeat scroll right center;
-     background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%);
+     background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d, #3f3833);
      background-size: auto 105%, 100% 100%;
 }
@@ -594 +597 @@
 
 .snarkTrackerDetails, .snarkTorrentDetails {
-     padding: 2px 0 !important;
      width: 16px !important;
-}
-
-.snarkTrackerDetails {
-     padding: 0 3px !important;
+     text-align: center !important;
+     font-weight: bold;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+.snarkTrackerDetails img, .snarkTorrentDetails img, .snarkDirInfo td:first-child img {
+     padding: 3px !important;
+     border: 1px solid transparent !important;
+     margin: 0 !important;
+}
+
+.snarkDirInfo td:first-child img {
+     margin: 0 2px !important;
+}
+
+.snarkTrackerDetails a:hover img, .snarkTrackerDetails img:hover, .snarkTrackerDetails a:focus img,
+.snarkTorrentDetails a:hover img, .snarkTorrentDetails img:hover, .snarkTorrentDetails a:focus img,
+.snarkDirInfo td:first-child a:hover img, .snarkDirInfo td:first-child a:focus img {
+     border: 1px solid #f60 !important;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #f60;
+     background: #ffeadf;
+     background: linear-gradient(to bottom, #ffeadf 50%, #cfb6a8 50%);
+     filter: none !important;
+}
+
+.snarkTrackerDetails a:active img, .snarkTorrentDetails a:active img, .snarkDirInfo td:first-child a:active img {
+     box-shadow: inset 2px 2px 3px 1px #59513b;
 }
 
@@ -651 +678 @@
      border-radius: 2px;
      padding: 3px !important;
-     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
+     background: linear-gradient(to bottom, #fff7ef 51%, #cfc1b5 52%, #cfc1b5);
      box-shadow: inset 0 0 0 1px #efe6e0;
      vertical-align: middle;
@@ -661 +688 @@
 .snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover,
 .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus  {
-     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+     background: linear-gradient(to bottom, #ffeadf 51%, #cfb6a8 52%);
      border: 1px solid #930 !important;
      box-shadow: inset 0 0 0 1px #fff;
@@ -994 +1021 @@
 
 .percentBarOuter {
-     background: #fff7ef;
-     background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px);
+     display: inline-block;
+     margin: 0;
      border: 1px solid #998;
      border-bottom: 1px solid #776;
      border-right: 1px solid #776;
+     border-radius: 2px;
      box-shadow: none;
      opacity: 1;
-     margin: 0;
-     display: inline-block;
+     background: #fff7ef;
+     background: repeating-linear-gradient(135deg, #fff7ef 1px, #fff7ef 5px, #efdfd1 6px, #efdfd1 11px);
 }
 
@@ -1023 +1051 @@
 
 .percentBarInner {
+     height: 100%;
+     height: 16px;
+     vertical-align: middle;
      border: none;
-     height: 100%;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #efe6e0;
      background: #cfc1b5;
-     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 0%, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1) 100%);
-     box-shadow: inset 0 0 0 1px #efe6e0;
-     vertical-align: middle;
-     height: 16px;
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.8) 50%, rgba(207, 193, 181, 0.9) 50%, rgba(207, 193, 181, 1));
 }
 
 .snarkTorrentDownloaded .percentBarInner {
-     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) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5));
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 37px, rgba(255, 255, 0, 0.5) 74px, rgba(0, 255, 0, 0.5));
 }
 
 .snarkDirInfo .percentBarInner {
-     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) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5));
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)), linear-gradient(to right, rgba(255, 100, 0, 0.5) 30px, rgba(255, 255, 0, 0.5) 60px, rgba(0, 255, 0, 0.5));
 }
 
 .peerinfo .percentBarInner {
-     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;
+     background: linear-gradient(to bottom, rgba(255, 247, 239, 0.75) 50%, rgba(207, 193, 181, 0.8) 50%, rgba(207, 193, 181, 0.9)) !important;
 }
 
@@ -1208 +1237 @@
      border-top: 0;
      background: #fff7ef;
-     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, rgba(207, 193, 181, 0.6) 52%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
+     background: linear-gradient(to bottom, #fff7ef 50%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604e 1px, #a09286 1px, #bfafa2 2px);
      color: #444039 !important;
      box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0;
@@ -1219 +1248 @@
 .snarkConfigTitle:hover, .toggleview:hover, input.toggle_input:focus + .toggleview {
      background: #ffeadf;
-     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+     background: linear-gradient(to bottom, #ffeadf 50%, #cfb6a8 50%);
      color: #930 !important;
+     transition: ease all 0.1s;
 }
 
@@ -1233 +1263 @@
 .snarkConfigTitle:active, .toggleview:active {
      box-shadow:  0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513b;
-}
-
-.snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover {
-     color: #930 !important;
-}