Improved night mode.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meshcentral",
-  "version": "0.5.1-t",
+  "version": "0.5.1-u",
   "keywords": [
     "Remote Management",
     "Intel AMT",

public/styles/style.css

@@ -889,11 +889,19 @@ NoMeshesPanel img {
     padding: 4px;
 }
 
+.night #p5filehead {
+    background-color: #333;
+}
+
 #p5filesubhead {
     background-color: #E4E9E7;
     height: 28px;
 }
 
+.night #p5filesubhead {
+    background-color: #222;
+}
+
 #p5rightOfButtons {
     float: right;
     margin-top: 3px;
@@ -1525,10 +1533,20 @@ a {
 
 .style10 {
     background-color: #C9C9C9;
+    color: #000;
 }
 
 .night .style10 {
-    color: #333;
+    background-color: #333;
+    color: #CCC;
+}
+
+.style10s {
+    background-color: #b9b9b9;
+}
+
+.night .style10s {
+    background-color: #444;
 }
 
 .style11 {
@@ -1542,7 +1560,13 @@ a {
     background-color: #D3D9D6;
 }
 
+.night .style14 {
+    background-color: #333;
+    color: #CCC;
+}
+
 .auto-style1 {
+    background-color: #D3D9D6;
     text-align: right;
 }
 
@@ -1552,7 +1576,8 @@ a {
 }
 
 .night .auto-style1 {
-    color: black;
+    background-color: #333;
+    color: #CCC;
 }
 
 .night #pTable {
@@ -1665,7 +1690,7 @@ a {
 }
 
 .night .g1 {
-    background-image: linear-gradient(to right, #000 0%, #c9c9c9 100%);
+    background-image: linear-gradient(to right, #000 0%, #333 100%);
 }
 
 #p3events .g1 {
@@ -1690,7 +1715,7 @@ a {
 }
 
 .night .g1s {
-    background-image: linear-gradient(to right, #000 0%, #b9b9b9 100%);
+    background-image: linear-gradient(to right, #000 0%, #444 100%);
 }
 
 .g2 {
@@ -1708,7 +1733,7 @@ a {
 }
 
 .night .g2 {
-    background-image: linear-gradient(to right, #c9c9c9 0%, #000 100%);
+    background-image: linear-gradient(to right, #333 0%, #000 100%);
 }
 
 #p3events .g2 {
@@ -1733,7 +1758,7 @@ a {
 }
 
 .night .g2s {
-    background-image: linear-gradient(to right, #b9b9b9 0%, #000 100%);
+    background-image: linear-gradient(to right, #444 0%, #000 100%);
 }
 
 .h1pre {
@@ -1762,7 +1787,7 @@ a {
 }
 
 .night .h1 {
-    background-image: linear-gradient(to right, #000 0%, #d3d9d6 100%);
+    background-image: linear-gradient(to right, #000 0%, #333 100%);
 }
 
 .h2end {
@@ -1786,7 +1811,7 @@ a {
 }
 
 .night .h2 {
-    background-image: linear-gradient(to right, #d3d9d6 0%, #000 100%);
+    background-image: linear-gradient(to right, #333 0%, #000 100%);
 }
 
 .e1 {
@@ -1806,13 +1831,18 @@ a {
 }
 
 .night .e2 {
-    color: black;
+    color: #CCC;
+    background-color: #333;
 }
 
 .e2s {
     background-color: #b9b9b9;
 }
 
+.night .e2s {
+    background-color: #444;
+}
+
 .bar {
     font-size: large;
     background-color: #C9C9C9;
@@ -1822,9 +1852,17 @@ a {
 }
 
 .night .bar {
-    color: black;
+    color: #CCC;
+    background-color: #333;
 }
 
+.sbar {
+    background-color: #b9b9b9;
+}
+
+.night .sbar {
+    background-color: #444;
+}
 
 #p3users .bar {
     width: 100%;
@@ -1865,6 +1903,11 @@ a {
     color: black;
 }
 
+.night .bar18 {
+    background-color: #333;
+    color: #CCC;
+}
+
 .bar182 {
     font-size: large;
     height: 18px;
@@ -2261,7 +2304,8 @@ a {
 }
 
 .night .serverStateTableCell {
-    color: black;
+    background-color: #333;
+    color: #CCC;
 }
 
 .userTableHeader {
@@ -2647,6 +2691,10 @@ a {
     background-color: #DDD;
 }
 
+.night .traceEvent {
+    background-color: #222;
+}
+
 .p42tblRow {
     height: 36px;
     max-height: 40px;

views/default.handlebars

@@ -3065,7 +3065,7 @@
                         r += '<div class=deviceBarCheckbox><input class="' + node.meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + node._id + ' type=checkbox></div>';
                         r += '<div class=deviceBarIcon onclick=gotoDevice(\'' + node._id + '\',null,null,event)><div class=\"j' + icon + '\" style=width:16px;margin-top:1px;margin-left:2px;height:16px></div></div>';
                         r += '<div class=g1 style=height:18px;float:left></div><div class=g2 style=height:18px;float:right></div>';
-                        r += '<div style=cursor:pointer;font-size:14px title="' + title + '" onclick=gotoDevice(\'' + node._id + '\',null,null,event)><span style=width:300px>' + name + '</span></div></div></td>';
+                        r += '<div class=style10 style=cursor:pointer;font-size:14px title="' + title + '" onclick=gotoDevice(\'' + node._id + '\',null,null,event)><span style=width:300px>' + name + '</span></div></div></td>';
                         r += '<td style=text-align:center>' + getUserShortStr(node);
                         r += '<td style=text-align:center>' + (node.ip != null ? node.ip : '');
                         r += '<td style=text-align:center>' + states.join('&nbsp;+&nbsp;');
@@ -7526,7 +7526,7 @@
                 x += '<table style=width:100%>';
                 for (var i in network.netif) {
                     var m = network.netif[i];
-                    x += '<tr><td><div style=color:black;background-color:lightgray;border-radius:5px;padding:8px>';
+                    x += '<tr><td><div class=style10 style=border-radius:5px;padding:8px>';
                     x += '<div style=margin-bottom:3px><b>' + EscapeHtml(m.name + (m.dnssuffix?(', ' + m.dnssuffix):'')) + '</b></div>';
                     if (m.desc) { x += addDetailItem("Description", EscapeHtml(m.desc).split('(R)').join('&reg;')); }
                     //if (m.dnssuffix) { x += addDetailItem("DNS Suffix", m.dnssuffix); }
@@ -7591,7 +7591,7 @@
                     for (var i in hardware.windows.memory) {
                         var m = hardware.windows.memory[i];
                         x += '<tr>';//<td VALIGN=Top style=width:38px><img src="images/ram2.png" />'
-                        x += '<td><div style=color:black;background-color:lightgray;border-radius:5px;padding:8px>';
+                        x += '<td><div class=style10 style=border-radius:5px;padding:8px>';
                         x += '<div style=margin-bottom:3px><b>' + EscapeHtml(m.BankLabel) + '</b></div>';
                         if (m.Capacity) { x += addDetailItem("Capacity / Speed", format("{0} Mb, {1} Mhz", (m.Capacity / 1024 / 1024), m.Speed), s); }
                         if (m.PartNumber) { x += addDetailItem("Part Number", EscapeHtml((m.Manufacturer && m.Manufacturer != 'Undefined')?(m.Manufacturer + ', '):'') + EscapeHtml(m.PartNumber), s); }
@@ -9489,9 +9489,10 @@
         // Highlights the device being hovered
         function eventMouseHover(e, over) {
             e.children[1].classList.remove('g1s');
-            e.children[2].style['background-color'] = ((over == 0) ? '#c9c9c9' : '#b9b9b9');
+            e.children[2].classList.remove('style10s');
+            //e.children[2].style['background-color'] = ((over == 0) ? '#c9c9c9' : '#b9b9b9');
             e.children[3].classList.remove('g2s');
-            if (over == 1) { e.children[1].classList.add('g1s'); e.children[3].classList.add('g2s'); }
+            if (over == 1) { e.children[1].classList.add('g1s'); e.children[2].classList.add('style10s'); e.children[3].classList.add('g2s'); }
         }
 
         function eventsUpdate() {
@@ -9778,13 +9779,15 @@
         // Highlights the user being hovered
         function userMouseHover(element, over) {
             var e = element.children[0].children[0].children[1];
+            element.children[0].children[0].classList.remove('sbar');
             e.children[1].classList.remove('g1s');
             e.children[2].classList.remove('g2s');
             if (over == 1) {
                 e.children[1].classList.add('g1s');
                 e.children[2].classList.add('g2s');
+                element.children[0].children[0].classList.add('sbar');
             }
-            element.children[0].children[0].style['background-color'] = ((over == 0) ? '#c9c9c9' : '#b9b9b9');
+            //element.children[0].children[0].style['background-color'] = ((over == 0) ? '#c9c9c9' : '#b9b9b9');
         }
 
         // Highlights the user being hovered