Changeset 0e5b46e7 for installer

Timestamp:

Oct 25, 2017 9:31:13 AM (3 years ago)

Author:

str4d <str4d@…>

Branches:

master

Children:

5ecae1a

Parents:

97267a4

Message:

Console sidebar improvements

Sidebar:

• Adjust vertical spacing of general section
• Rename 'General' section to 'Router Info' and move ident info to h3 tooltip (ticket #1996)
• Replace 'Short Router Info' with a new 'Advanced Router Info' section in default advanced sidebar (adds memory usage and clock skew)
• Add optional embedded bandwidth graph (experimental)
• Add optional memory usage bar
• Add optional Advanced Peers section (adds failing and banned peers)
• Add Help link to 'I2P Internals' section
• Add help page anchored links and troubleshooting to 'Help & FAQ' section
• Add download progress bar for router and plugin updates
• Add 'Advanced Minimal' sidebar configuration
• Add Jobs and Events links to Advanced section
• Add additional reachability states for clockskew and vmcomm (with icons)

Homepage: Add 'Customize Sidebar' link to signpost the feature now that there

are more optional sections available (ticket #1996)

Location:

installer/resources/themes/console

Files:

• classic/console.css (modified) (8 diffs)
• classic/console_big.css (modified) (2 diffs)
• dark/console.css (modified) (8 diffs)
• dark/console_ar.css (modified) (1 diff)
• dark/console_big.css (modified) (2 diffs)
• images/info/sidebar.png (added)
• light/console.css (modified) (15 diffs)
• light/console_ar.css (modified) (2 diffs)
• light/console_big.css (modified) (1 diff)
• midnight/console.css (modified) (11 diffs)
• midnight/console_ar.css (modified) (1 diff)

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

@@ -528 +528 @@
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-bottom: -5px !important;
      margin-top: -6px !important;
 }
 
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    content: "";
    display: inline-block;
@@ -539 +540 @@
 }
 
-#sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child {
+#sb_peers td:first-child, #sb_peersadvanced td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child,
+#sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child {
      white-space: nowrap;
 }
@@ -548 +550 @@
 }
 
+#sb_peersadvanced a {
+     padding: 0;
+}
+
+#sb_peersadvanced a b {
+     color: #2c354f;
+}
+
+#sb_peersadvanced a:hover b {
+     color: #f60;
+}
+
+#sb_peersadvanced .separator td::after {
+     min-height: 0;
+}
+
+#sb_peersadvanced .separator hr {
+     margin: 3px 0 2px !important;
+     color: transparent;
+     background: transparent;
+     border-bottom: 1px dashed #89f;
+}
+
 #sb_localid {
      margin: -3px 0 -1px;
@@ -560 +585 @@
 }
 
-#sb_internals, #sb_services, #sb_advanced {
+#sb_internals, #sb_services, #sb_advanced, #sb_help {
      margin-top: -3px !important;
 }
 
-#sb_internals a, #sb_services a, #sb_advanced a {
+#sb_internals a, #sb_services a, #sb_advanced a, #sb_help a {
      display: inline-block;
      padding: 2px;
@@ -834 +859 @@
 
 /* end network status */
+
+/* mini sidebar graph */
+
+#sb_bandwidthgraph {
+     width: 202px !important;
+     margin: 0;
+     margin: -20px 0 0 0;
+     border-collapse: separate;
+     border-spacing: 0;
+     padding: 0;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #ccf;
+}
+
+#sb_bandwidthgraph:hover {
+     border: 1px solid #f60;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+a:active #sb_bandwidthgraph {
+     border: 1px solid #f30;
+}
+
+#sb_bandwidthgraph td {
+     background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important;
+     padding: 0 1px;
+     box-shadow: inset 0 0 0 1px #fff;
+     height: 38px;
+     vertical-align: top;
+}
+
+#sb_graphstats {
+     display: inline-block;
+     padding: 2px 8px;
+     font-weight: bold;
+     background: #ddf;
+     background: linear-gradient(to right, #ddf, #efefff, #ddf);
+     border: 1px solid #89f;
+     border-top: none;
+     border-radius: 0 0 3px 3px;
+     box-shadow: inset 0 0 0 1px #fff;
+     opacity: 0;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer:hover #sb_graphstats {
+     opacity: 1;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer {
+     background-color: #f3f3ff;
+     background-position: left -60px top -35px !important;
+     background-position: left -60px top -29px !important;
+     background-size: 280px 92px !important;
+     background-size: 280px 77px !important;
+     background-repeat: no-repeat !important;
+     background-blend-mode: multiply;
+     margin: 0 2px -21px 1px !important;
+     padding: 0 5px 0 0;
+}
+
+@media screen and (min-width: 1500px) {
+#sb_bandwidthgraph {
+     width: 223px !important;
+     background-size: 300px 92px !important;
+}
+
+#sb_graphcontainer {
+     background-size: 300px 77px !important;
+}
+}
+/* end mini sidebar graph */
+
+/* status bars */
+
+.percentBarOuter {
+     width: 196px;
+     margin: -4px 0 -5px 3px;
+     text-align: center;
+     border: 1px solid #99f;
+     box-shadow: 0 0 1px rgba(200,200,200,0.8);
+     background: #eef;
+     background: repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px);
+}
+
+@media screen and (min-width: 1500px) {
+.percentBarOuter {
+     width: 210px;
+}
+}
+
+.percentBarInner {
+     vertical-align: middle;
+     border: none;
+     height: 14px;
+     background: #bbf;
+     background: linear-gradient(to right, rgba(0,255,0,0.1) 65px, rgba(255,255,0,0.1) 110px, rgba(255,128,0,0.1) 175px, rgba(255,0,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%);
+     box-shadow: inset 0 0 0 1px #ddf;
+}
+
+.percentBarText {
+     display: inline !important;
+     white-space: nowrap;
+     text-align: center !important;
+     font-weight: bold !important;
+     color: #2c354f;
+     text-shadow: 0 1px 1px rgba(255,255,255,0.8);
+     float: left;
+     width: 100%;
+     height: 14px;
+     padding: 0;
+     opacity: 0;
+     transition: ease opacity 0.2s;
+}
+
+.percentBarOuter:hover .percentBarText {
+     opacity: 1;
+     transition: ease opacity 0.2s;
+}
+
+/* updates download bar */
+
+.sb_updatestatus {
+     display: block;
+     border: 1px solid #99f;
+     border-top: none;
+     color: #2c354f;
+     border-radius: 0 0 3px 3px;
+     box-sizing: border-box;
+     background: #ccf;
+     background: linear-gradient(to right, #eef, #eff2ff 30%, #eff2ff 60%, #eef);
+     box-shadow: inset 0 0 0 1px #fff;
+     margin: -8px 2px 5px !important;
+     padding: 3px 0 4px;
+     font-style: italic;
+}
+
+.sb_info .percentBarOuter {
+     margin: 3px -4px -5px 2px;
+     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);
+}
+
+@keyframes downloadbar {
+from {
+     background: repeating-linear-gradient(135deg, rgba(221, 221, 255, 0.7) 1px, rgba(221, 221, 255, 0.7) 6px, rgba(238, 238, 255,0.7) 7px, rgba(238, 238, 255,0.7) 11px);
+}
+
+to {
+     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);
+}
+}
+
+.sb_info .percentBarOuter {
+     animation: downloadbar 3s infinite;
+}
+
+.sb_info .percentBarInner {
+     height: 16px;
+     background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%);
+
+}
+
+.sb_info .percentBarText {
+     opacity: 1;
+     padding-top: 2px;
+     mix-blend-mode: multiply;
+     color: #33f;
+
+}
+/* end updates download bar */
+/* end status bars */
 
 /* end sidebar */
@@ -6887 +7085 @@
 
 @media screen and (max-width: 1500px) {
-#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
-#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    min-height: 12px;
 }
@@ -6989 +7187 @@
 }
 
-#sb_internals a, #sb_services a, #sb_advanced a {
+#sb_internals a, #sb_services a, #sb_advanced a, #sb_help a {
      max-width: 212px;
 }
@@ -6996 +7194 @@
      min-width: 100px;
      margin: 2px 4px 1px;
+}
+
+.percentBarOuter {
+     width: 217px;
 }
 

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

@@ -67 +67 @@
 }
 
-#sb_bandwidth td:last-child, #sb_peers td:last-child, #sb_queue td:last-child,  #sb_tunnels td:last-child, #sb_general td:last-child, #sb_shortgeneral td:last-child {
+#sb_bandwidth td:last-child, #sb_peers td:last-child, #sb_peersadvanced td:last-child, #sb_queue td:last-child,  #sb_tunnels td:last-child, #sb_general td:last-child, #sb_shortgeneral td:last-child, #sb_advancedgeneral td:last-child {
      font-size: 10pt !important;
 }
@@ -75 +75 @@
      font-weight: normal;
      text-shadow: none;
+}
+
+#sb_bandwidthgraph {
+     width: 218px !important;
+     margin: -25px 0 -6px !important;
+}
+
+#sb_graphstats {
+     font-size: 9pt !important;
+}
+
+#sb_graphcontainer {
+     background-position: left -66px top -30px !important;
+     background-size: 340px 80px !important;
+}
+
+.percentBarOuter {
+     width: 212px !important;
+     margin: -3px 0 -4px 3px;
+}
+
+.percentBarText {
+     font-size: 9pt !important;
+     padding: 0 !important;
+     margin-top: -1px;
 }
 

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

@@ -398 +398 @@
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-bottom: -4px !important;
 }
 
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
-#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    content: "";
    display: inline-block;
@@ -409 +409 @@
 }
 
-#sb_general td, #sb_shortgeneral td {
+#sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td, #sb_peersadvanced td {
      white-space: nowrap;
 }
 
-#sb_general td:first-child, #sb_shortgeneral td:first-child {
+#sb_general td:first-child, #sb_shortgeneral td:first-child,  #sb_advancedgeneral td:first-child, #sb_peersadvanced td:first-child {
      max-width: 130px;
 }
@@ -458 +458 @@
 }
 
-#sb_internals td, #sb_services td, #sb_advanced td { /* color ellipsis */
+#sb_internals td, #sb_services td, #sb_advanced td, #sb_help td { /* color ellipsis */
      color: #595 !important;
 }
 
-#sb_services, #sb_internals, #sb_advanced {
+#sb_services, #sb_internals, #sb_advanced, #sb_help {
      margin-top: -4px !important;
 }
 
-#sb_internals a, #sb_services a, #sb_advanced a {
+#sb_internals a, #sb_services a, #sb_advanced a, #sb_help a {
      padding: 1px 3px;
      display: inline-block;
@@ -481 +481 @@
 }
 
-#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link {
      word-break: break-all;
      max-width: 192px;
@@ -488 +488 @@
      text-overflow: ellipsis;
      line-height: 140%;
+}
+
+#sb_peersadvanced a {
+     color: #ee9;
+}
+
+#sb_peersadvanced .separator td::after {
+     min-height: 0;
+}
+
+.routersummary .separator hr, .routersummary .separator hr:last-child {
+     display: block !important;
+     color: transparent;
+     background: transparent;
+     border-bottom: 1px dashed #141;
+     height: 1px;
+     margin: 4px 0 3px !important;
 }
 
@@ -679 +696 @@
 
 /* end sidebar news */
+
+/* mini sidebar graph */
+
+#sb_bandwidthgraph {
+     width: 100%;
+     margin: -5px 0 -5px -5px;
+     border-collapse: separate;
+     border-spacing: 0;
+     padding: 0;
+     border: 1px solid #5df;
+     box-shadow: 0 0 1px #ccf;
+}
+
+#sb_bandwidthgraph:hover {
+     border: 1px solid #f60;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+a:active #sb_bandwidthgraph {
+     border: 1px solid #f30;
+}
+
+#sb_bandwidthgraph td {
+     background: linear-gradient(to top, #fff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #fff 93%), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important;
+     padding: 0 1px;
+     box-shadow: inset 0 0 0 1px #fff;
+     height: 40px;
+     vertical-align: top;
+}
+
+#sb_graphstats {
+     display: inline-block;
+     padding: 2px 8px;
+     font-weight: bold;
+     background: #ddf;
+     background: linear-gradient(to right, #ddf, #efefff, #ddf);
+     border: 1px solid #89f;
+     border-top: none;
+     border-radius: 0 0 3px 3px;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff;
+     opacity: 0;
+     transition: ease opacity 0.3s;
+     color: #89f;
+}
+
+#sb_graphcontainer:hover #sb_graphstats {
+     opacity: 1;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer {
+     background-color: #000;
+     background-position: left -72px top -23px !important;
+     background-size: 280px 77px !important;
+     background-repeat: no-repeat !important;
+     margin-bottom: -7px !important;
+     filter: invert(1) hue-rotate(90deg);
+}
+
+/* reduce flicker as graph image gets inverted and hue-rotated */
+
+@keyframes graphfadein {
+from {
+     filter: invert(1) hue-rotate(90deg) opacity(0);
+}
+
+to {
+     filter: invert(1) hue-rotate(90deg) opacity(1);
+}
+}
+
+#sb_graphcontainer {
+     animation: graphfadein 0.3s ease-in;
+}
+
+@media screen and (min-width: 1500px) {
+#sb_graphcontainer {
+     background-size: 300px 77px !important;
+}
+}
+/* end mini sidebar graph */
+
+/* status bar */
+
+.percentBarOuter {
+     width: 194px;
+     background: #000;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
+     background: repeating-linear-gradient(to right, #000 1px, #000 2px, #010 2px, #010 4px);
+     border: 1px solid #040;
+     border-bottom: 1px solid #020;
+     border-right: 1px solid #020;
+     opacity: 1;
+     box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
+     margin: -3px 0 -5px -6px;
+}
+
+@media screen and (min-width: 1500px) {
+.percentBarOuter {
+     width: 220px;
+}
+}
+
+.percentBarOuter:hover .percentBarText {
+     opacity: 1;
+     transition: ease opacity 0.2s;
+}
+
+.percentBarInner {
+     height: 14px;
+     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%);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.percentBarText {
+     width: 100%;
+     font-weight: bold;
+     text-align: center;
+     vertical-align: middle;
+     float: left;
+     opacity: 0;
+     transition: ease opacity 0.2s;
+}
+
+/* update bar */
+
+.sb_updatestatus {
+     background: #000;
+     background: linear-gradient(to right, #020, #000, #020);
+     margin: -6px -2px -2px;
+     padding: 2px 0 4px;
+     border-bottom: 1px solid #494;
+}
+
+.sb_info .percentBarOuter {
+     margin: 6px -2px -18px 2px;
+     box-shadow: none !important;
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
+     animation: downloadbar 3s infinite alternate;
+}
+
+.sb_info .percentBarText {
+     opacity: 1;
+     padding-top: 2px;
+}
+
+.sb_info .percentBarInner {
+     height: 16px;
+}
+
+@keyframes downloadbar {
+from {
+     background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px);
+}
+
+to {
+     background: repeating-linear-gradient(135deg, #010 1px, #010 6px, #000 7px, #000 11px);
+}
+}
+
+/* end status bar */
 /* end sidebar */
 
@@ -6897 +7076 @@
 
 @media screen and (max-width: 1500px) {
-#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
-#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    min-height: 12px;
 }
@@ -7082 +7261 @@
 }
 
-#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link {
      max-width: 216px !important;
 }

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

@@ -533 +533 @@
 }
 
+.percentBarOuter {
+     margin: -3px -6px -5px 0;
+}
+
+.sb_info .percentBarOuter {
+     margin: 6px 2px -18px -2px;
+}
+
+.sb_info .percentBarText {
+     font-size: 9pt;
+     padding-top: 1px;
+     direction: ltr;
+}
+
 .main#console .twocol {
      margin: 15px 35px 5px 0 !important;

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

@@ -202 +202 @@
 }
 
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
+   content: "";
+   display: inline-block;
+   min-height: 14px !important;
+}
+
 .sb_newsheadings td, .sb_newsheadings tr:hover td {
      background-position: 4px center !important;
@@ -209 +216 @@
 .search select, .search button, .search input[type="text"] {
      font-size: 10pt !important;
+}
+
+.percentBarOuter {
+     width: 206px;
+     margin: -1px 0 -2px -4px;
+}
+
+#sb_graphcontainer {
+     background-position: left -74px top -21px !important;
+     background-size: 300px 77px !important;
 }
 

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

@@ -14 +14 @@
      background: #a4a4cb url(images/tile2.png) fixed;
      background-size: 32px 32px;
+}
 }
 
@@ -131 +132 @@
 .routersummary div[style="height: 36px;"] {
      margin: 0;
-     padding: 0;
+     padding: 0 0 1px;
      text-align: center;
 }
@@ -142 +143 @@
 
 .routersummary img[src$="i2plogo.png"] {
-     opacity: 0.9;
+     opacity: 0.7;
      transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
-     margin-top: -1px;
-     margin-left: -1px !important;
-     width: 194px;
+     margin: 0 !important;
+     width: 190px;
      height: auto;
      filter: drop-shadow(0 0 1px #ccf);
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-.routersummary img[src$="i2plogo.png"] {
-     margin-top: -2px !important;
-}
 }
 
@@ -163 +157 @@
 }
 
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
 .routersummary a:active img[src$="i2plogo.png"] {
-     filter: drop-shadow(0 0 2px #f30);
+     filter: drop-shadow(0 0 2px #d30);
 }
 
@@ -171 +169 @@
 }
 
-.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
-     filter: drop-shadow(0 0 1px #f60);
-}
-
 .routersummary form {
-     margin: 0 -7px;
+     margin: -2px -7px;
      padding: 0 0 3px;
 }
 
-.routersummary form[action="/config"] {
-     margin: -2px -7px;
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.routersummary form {
+     margin: -1px -7px -3px !important;
+}
 }
 
@@ -332 +328 @@
 
 #sb_version {
-     margin-top: 5px !important;
-     margin-bottom: 8px !important;
+     margin-top: 7px !important;
+     margin-bottom: 10px !important;
 }
 
@@ -375 +371 @@
 }
 
-#sb_internals, #sb_advanced {
-     margin: -9px -6px -6px;
-}
-
-#sb_internals a, #sb_advanced a {
+#sb_internals, #sb_advanced, #sb_help {
+     margin: -9px -6px -5px;
+     width: 204px !important;
+}
+
+#sb_internals a, #sb_advanced a, #sb_help a {
      padding: 2px;
      display: inline-block;
@@ -388 +385 @@
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_internals a:hover, #sb_advanced a:hover, #sb_help a:hover {
+     background: #ffd;
+     border-radius: 3px;
+}
+
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-bottom: -4px !important;
      margin-top: -10px !important;
 }
 
-#sb_general, #sb_shortgeneral {
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
+     margin-bottom: -6px !important;
+}
+}
+
+#sb_shortgeneral {
      margin-top: -7px !important;
 }
 
-#sb_general td, #sb_shortgeneral td {
+#sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td {
      white-space: nowrap;
 }
 
-#sb_general td:first-child, #sb_shortgeneral td:first-child {
+#sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child {
      max-width: 130px;
 }
 
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
-#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    content: "";
    display: inline-block;
@@ -412 +420 @@
 }
 
-#sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child {
+#sb_peers td:first-child, #sb_peersadvanced td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child,
+#sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child {
      text-transform: capitalize;
 }
+
+#sb_peersadvanced a:hover b, #sb_peersadvanced a:visited:hover b {
+     color: #f60 !important
+}
+
+#sb_peersadvanced a:active b, #sb_peersadvanced a:visited:active b {
+     color: #f90 !important
+}
+
+#sb_peersadvanced .separator td {
+     padding: 0;
+}
+
+.separator hr, .separator hr:last-child {
+     color: transparent;
+     background: transparent;
+     height: 1px;
+     border-bottom: 1px dashed #99f !important;
+     margin: 3px 0 -10px !important;
+     display: block !important;
+}
+
+/* mini sidebar graph */
+
+#sb_bandwidthgraph {
+     width: 100%;
+     margin: -5px 0 -5px -5px;
+     border-collapse: separate;
+     border-spacing: 0;
+     padding: 0;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #ccf;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+#sb_bandwidthgraph {
+     margin: -5px 0 -6px -5px !important;
+}
+}
+
+#sb_bandwidthgraph:hover {
+     border: 1px solid #f60;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+a:active #sb_bandwidthgraph {
+     border: 1px solid #f30;
+}
+
+#sb_bandwidthgraph td {
+     background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important;
+     padding: 0 1px;
+     box-shadow: inset 0 0 0 1px #fff;
+     height: 40px;
+     vertical-align: top;
+}
+
+#sb_graphstats {
+     display: inline-block;
+     padding: 2px 8px;
+     font-weight: bold;
+     background: #ddf;
+     background: linear-gradient(to right, #ddf, #efefff, #ddf);
+     border: 1px solid #89f;
+     border-top: none;
+     border-radius: 0 0 3px 3px;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff;
+     opacity: 0;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer:hover #sb_graphstats {
+     opacity: 1;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer {
+     background-color: #f3f3ff;
+     background-position: left -60px top -23px !important;
+     background-size: 280px 77px !important;
+     background-repeat: no-repeat !important;
+     background-blend-mode: multiply;
+}
+
+@media screen and (min-width: 1500px) {
+#sb_graphcontainer {
+     background-size: 300px 77px !important;
+}
+}
+/* end mini sidebar graph */
+
+/* status bars for memory usage and router/plugin updates */
+
+.percentBarOuter {
+     width: 196px;
+     margin: -4px -5px -4px -3px;
+     text-align: center;
+     border: 1px solid #99f;
+     box-shadow: 0 0 1px rgba(200,200,200,0.8);
+     background: #eef;
+     background: linear-gradient(to right, rgba(0,255,0,0.05) 50%, rgba(255,255,0,0.05) 75%, rgba(255,128,0,0.05) 90%, rgba(255,0,0,0.1)), repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px);
+}
+
+@media screen and (min-width: 1500px) {
+.percentBarOuter {
+     width: 212px;
+}
+}
+
+.percentBarInner {
+     vertical-align: middle;
+     border: none;
+     height: 14px;
+     background: #bbf;
+     background: linear-gradient(to right, rgba(0,255,0,0.1) 65px, rgba(255,255,0,0.1) 110px, rgba(255,128,0,0.1) 175px, rgba(255,0,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%);
+     background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%);
+     box-shadow: inset 0 0 0 1px #ddf;
+}
+
+.percentBarText {
+     display: inline !important;
+     white-space: nowrap;
+     text-align: center !important;
+     font-weight: bold !important;
+     color: #41465f;
+     text-shadow: 0 1px 1px rgba(255,255,255,0.8);
+     float: left;
+     width: 100%;
+     height: 14px;
+     padding: 0;
+     opacity: 0;
+     transition: ease opacity 0.2s;
+}
+
+.percentBarOuter:hover .percentBarText {
+     opacity: 1;
+     transition: ease opacity 0.2s;
+}
+
+/* updates download bar */
+
+.sb_update a {
+    white-space: nowrap;
+    vertical-align: baseline;
+}
+
+.sb_updatestatus {
+     display: block;
+     font-style: italic;
+     border: 1px solid #99f;
+     border-top: none;
+     border-radius: 0 0 3px 3px;
+     background: #ccf;
+     background: linear-gradient(to right, #ddf, #efefff 30%, #efefff 60%, #ddf);
+     box-shadow: inset 0 0 0 1px #fff;
+     margin: -7px 2px 5px !important;
+     padding: 4px 0 3px;
+     filter: drop-shadow(0 0 1px #ccf);
+}
+
+.sb_info .percentBarOuter {
+     margin: 3px -4px -19px 2px;
+     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);
+}
+
+@keyframes downloadbar {
+from {
+     background: repeating-linear-gradient(135deg, rgba(221, 221, 255, 0.7) 1px, rgba(221, 221, 255, 0.7) 6px, rgba(238, 238, 255,0.7) 7px, rgba(238, 238, 255,0.7) 11px);
+}
+
+to {
+     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);
+}
+}
+
+.sb_info .percentBarOuter {
+     animation: downloadbar 3s infinite;
+}
+
+.sb_info .percentBarInner {
+     height: 16px;
+}
+
+.sb_info .percentBarText {
+     opacity: 1;
+     padding-top: 3px;
+     mix-blend-mode: multiply;
+}
+/* end updates download bar */
+/* end status bars */
 
 #sb_warning {
@@ -550 +750 @@
      background-image: none !important;
      border: 0 !important;
-}
-
-.routersummary img:first-child {
-     margin-bottom: -2px !important;
-     opacity: 0.7;
-}
-
-.routersummary img:hover:first-child {
-     margin-bottom: -2px !important;
-     opacity: 1;
 }
 
@@ -714 +904 @@
 .sb_newsheadings table {
      table-layout: auto;
-     width: 202px !important;
+     width: 204px !important;
      margin: -12px 0 -8px -14px;
 }
@@ -1716 +1906 @@
 #sidebarconf button {
      margin: 2px 0 2px 3px !important;
-     padding: 2px;
+     padding: 2px 3px;
      min-width: 0;
      background-size: 100% 100% !important;
@@ -3104 +3294 @@
      background: linear-gradient(135deg, #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;
      border: 1px solid #447;
-     border-radius: 2px;
+     border-radius: 2px 2px 0 0;
      min-width: 546px;
      z-index: 999;
@@ -7076 +7266 @@
 }
 
-#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
-#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after,
+#sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    min-height: 12px;
 }
 
-#sb_internals a, #sb_advanced a {
+#sb_internals a, #sb_advanced a #sb_help a {
      max-width: 200px;
 }
@@ -7259 +7449 @@
 }
 
-#sb_internals a, #sb_advanced a {
+#sb_internals a, #sb_advanced a, #sb_help a {
      max-width: 212px;
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-bottom: -4px !important;
      margin-top: -10px !important;
 }
 
-#sb_general, #sb_shortgeneral {
-     margin-top: -7px !important; 
-}
-
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
-#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
-   min-height: 14px;
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral {
+     margin-top: -7px !important;
+}
+
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
+     min-height: 14px;
 }
 

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

@@ -45 +45 @@
 .buckets {
      margin-bottom: -10px !important;
+}
+
+.routersummaryouter {
+     margin-right: -1px;
+}
+
+.routersummary {
+     margin-bottom: 4px;
 }
 
@@ -202 +210 @@
      padding-right: 28px !important;
      background-position: right 6px center !important;
+}
+
+#sb_graphcontainer {
+     background-position: left -60px top -20px !important;
+     transform: scale(-1, +1);
+}
+
+#sb_bandwidthgraph {
+     margin: -5px -5px -5px 0;
+}
+
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+#sb_bandwidthgraph {
+     margin: -5px -5px -6px 0 !important;
+}
+}
+
+.percentBarOuter {
+     margin: -4px -3px -4px -5px;
+     background: linear-gradient(to left, rgba(0,255,0,0.05) 50%, rgba(255,255,0,0.05) 75%, rgba(255,128,0,0.05) 90%, rgba(255,0,0,0.1)), repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px);
+}
+
+.sb_info .percentBarOuter {
+     margin: 3px 2px -19px -4px;
+}
+
+.sb_updatestatus, .sb_info .percentBarText {
+     font-size: 9pt;
+}
+
+.sb_info .percentBarText {
+     padding-top: 1px;
+     direction: ltr;
 }
 

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

@@ -75 +75 @@
 }
 
+#sb_graphcontainer {
+     background-position: left -60px top -20px !important;
+}
+
 .sb_newsheadings td, .sb_newsheadings tr:hover td {
      background-position: 4px center !important;
      padding-left: 22px !important;
+}
+
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after,
+#sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
+   min-height: 15px !important;
 }
 

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

@@ -1294 +1294 @@
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-top: -6px !important;
      margin-bottom: -5px !important;
 }
 
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
-#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
      content: "";
      display: inline-block;
@@ -1307 +1307 @@
 }
 
-#sb_general td, #sb_shortgeneral td {
+#sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td {
      white-space: nowrap;
 }
@@ -1356 +1356 @@
 }
 
-#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link {
      word-break: break-all;
      max-width: 190px;
@@ -1368 +1368 @@
 }
 
-#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a,
+#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, #sb_help a:hover,
 .news a:hover, #console a:hover, tt a:hover {
      background: #652787;
@@ -1375 +1375 @@
 }
 
-#sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_localtunnels tr:active, .news a:active, #console a:active, tt a:active {
+#sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_help a:active,
+#sb_localtunnels tr:active, .news a:active, #console a:active, tt a:active {
      background: #39144f;
      color: #c9ceff !important;
@@ -1382 +1383 @@
 #sb_localtunnels tr:active a {
      color: #c9ceff !important;
+}
+
+#sb_peersadvanced a {
+     padding: 0;
+     color: #c9ceff;
+}
+
+#sb_peersadvanced a:hover, #sb_peersadvanced a:focus {
+     color: #652787;
+}
+
+#sb_peersadvanced .separator td::after {
+     min-height: 0 !important;
+}
+
+#sb_peersadvanced .separator hr, #sb_peersadvanced .separator hr:last-child {
+     display: block !important;
+     margin: 3px 0 2px !important;
+     color: transparent;
+     background: transparent;
+     border-bottom: 1px dashed #2d296f;
 }
 
@@ -1571 +1593 @@
 
 /* end sidebar news */
+
+/* mini sidebar graph */
+
+#sb_bandwidthgraph {
+     width: 100%;
+     margin: -13px 0 0 -8px !important;
+     border-collapse: separate;
+     border-spacing: 0;
+     padding: 0;
+     border: 1px solid #5df;
+     box-shadow: 0 0 1px #ccf;
+}
+
+#sb_bandwidthgraph:hover {
+     border: 1px solid #f60;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+a:active #sb_bandwidthgraph {
+     border: 1px solid #f30;
+}
+
+#sb_bandwidthgraph td {
+     background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important;
+     background: linear-gradient(to top, #fff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #fff 93%), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important;
+     padding: 0 1px;
+     box-shadow: inset 0 0 0 1px #fff;
+     height: 40px;
+     vertical-align: top;
+}
+
+#sb_graphstats {
+     display: inline-block;
+     padding: 2px 8px;
+     font-weight: bold;
+     background: #444;
+     border: 1px solid #999;
+     border-top: none;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff;
+     opacity: 0;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer:hover #sb_graphstats {
+     opacity: 1;
+     transition: ease opacity 0.3s;
+}
+
+#sb_graphcontainer {
+     background-color: #000;
+     background-position: left -72px top -26px !important;
+     background-size: 280px 90px !important;
+     background-repeat: no-repeat !important;
+     margin: -7px 0 -3px !important;
+     height: 40px;
+     filter: invert(1) sepia(1) hue-rotate(180deg);
+}
+
+@keyframes graphfadein {
+from {
+     opacity: 0;
+}
+
+to {
+     opacity: 1;
+}
+}
+
+#sb_graphcontainer {
+     animation: graphfadein 0.4s ease-in; /* attempt to mitigate strobe effect as image loads before filters are applied */
+}
+
+@media screen and (min-width: 1500px) {
+#sb_graphcontainer {
+     background-size: 300px 77px !important;
+     background-position: left -72px top -20px !important;
+}
+
+#sb_bandwidthgraph {
+     width: 100%;
+     margin: -15px 0 0 -8px !important;
+}
+}
+
+/* end mini sidebar graph */
+
+/* status bar */
+
+.percentBarOuter {
+     width: 194px;
+     background: #000;
+     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;
+     opacity: 1;
+     box-shadow: 0 0 1px 1px rgba(0,0,0,0.8);
+     margin: -3px 0 -5px -6px;
+}
+
+@media screen and (min-width: 1500px) {
+.percentBarOuter {
+     width: 210px;
+}
+}
+
+.percentBarOuter:hover .percentBarText {
+     opacity: 1;
+     transition: ease opacity 0.2s;
+}
+
+.percentBarInner {
+     height: 14px;
+     background: #0e5f00;
+     background: linear-gradient(to bottom,  #33a 0%, #226 50%, #003 50%, #000 100%);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.percentBarText {
+     width: 100%;
+     font-weight: bold;
+     text-align: center;
+     vertical-align: middle;
+     float: left;
+     opacity: 0;
+     transition: ease opacity 0.2s;
+}
+
+/* update bar */
+
+.sb_updatestatus {
+     background: #000;
+     margin: -6px -4px -2px;
+     padding: 2px 0 4px;
+     border-bottom: 1px solid #443da0;
+     color: #c9ceff;
+}
+
+.sb_info .percentBarOuter {
+     margin: 5px -2px -4px 0;
+     box-shadow: none !important;
+     background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px);
+     animation: downloadbar 3s infinite alternate;
+}
+.sb_info .percentBarText {
+     opacity: 1;
+     padding-top: 2px;
+     color: #c9ceff;
+}
+
+.sb_info .percentBarInner {
+     height: 16px;
+}
+
+@keyframes downloadbar {
+from {
+     background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px);
+}
+
+to {
+     background: repeating-linear-gradient(135deg, #003 1px, #003 6px, #001 7px, #001 11px);
+}
+}
+
+/* end status bar */
 /* end sidebar */
 
@@ -6807 +6993 @@
 /* end network status */
 
-#sb_services, #sb_internals, #sb_advanced {
+#sb_services, #sb_internals, #sb_advanced, #sb_help {
      margin-top: -3px !important;
      margin-bottom: -5px !important;
@@ -7335 +7521 @@
 
 @media screen and (max-width: 1500px) {
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
-#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    min-height: 14px;
 }
@@ -7432 +7618 @@
 }
 
-#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after,
+#sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after {
    min-height: 18px;
 }
@@ -7512 +7699 @@
 }
 
-#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link {
      max-width: 207px;
 }
 
-#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+#sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue {
      margin-top: -4px !important;
      margin-bottom: -4px !important;

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

@@ -90 +90 @@
 #sb_localtunnels td:last-child {
      text-align: left;
+}
+
+#sb_bandwidthgraph {
+     margin: -13px -8px 0 0 !important;
+}
+
+#sb_graphcontainer {
+     background-position: left -72px top -24px !important;
+}
+
+.percentBarOuter {
+      margin: -3px -6px -5px 0;
+}
+
+.sb_info .percentBarOuter {
+     margin: 5px 0 -4px -2px;
+}
+
+.sb_updatestatus b {
+     font-weight: bold !important;
+}
+
+.sb_updatestatus, .sb_info .percentBarText {
+     font-size: 9pt;
+}
+
+.sb_info .percentBarText {
+     padding-top: 0;
+     direction: ltr;
 }