mods borders now on top

package-lock.json

@@ -10,7 +10,9 @@
       "integrity": "sha512-s2ZfgRWXeNUQTQE3O85CDDrU2Uo90pMlMkTxkz85wQOuzVxB8t4cubMPup3WlTPFKHQgb6lDkAHS3ljkUSFO6A==",
       "dev": true,
       "requires": {
-        "7zip-bin-linux": "1.2.0"
+        "7zip-bin-linux": "1.2.0",
+        "7zip-bin-mac": "1.0.1",
+        "7zip-bin-win": "2.1.1"
       }
     },
     "7zip-bin-linux": {
@@ -20,6 +22,20 @@
       "dev": true,
       "optional": true
     },
+    "7zip-bin-mac": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz",
+      "integrity": "sha1-Pmh3i78JJq3GgVlCcHRQXUdVXAI=",
+      "dev": true,
+      "optional": true
+    },
+    "7zip-bin-win": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/7zip-bin-win/-/7zip-bin-win-2.1.1.tgz",
+      "integrity": "sha512-6VGEW7PXGroTsoI2QW3b0ea95HJmbVBHvfANKLLMzSzFA1zKqVX5ybNuhmeGpf6vA0x8FJTt6twpprDANsY5WQ==",
+      "dev": true,
+      "optional": true
+    },
     "@types/node": {
       "version": "7.0.50",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.50.tgz",

src/_renderer.js

@@ -70,7 +70,6 @@ resumeInit = () => {
 initUI = () => {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
-        <h3 class="title" style="top:27px;width:14.5%;left:8px;"><p></p><p></p></h3>
     </section>
     <section id="main_shell" style="height:0%;width:0%;opacity:0;">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
@@ -78,7 +77,6 @@ initUI = () => {
     </section>
     <section class="mod_column" id="mod_column_right">
         <h3 class="title"><p>PANEL</p><p>NETWORK</p></h3>
-        <h3 class="title" style="top:27px;width:14.5%;right:8px;"><p></p><p></p></h3>
     </section>
     <section id="keyboard" style="opacity:0;">
     </section>`;
@@ -117,14 +115,19 @@ initUI = () => {
 };
 
 initMods = () => {
-    document.querySelectorAll(".mod_column").forEach((e) => {
-        e.setAttribute("class", "mod_column activated");
-    });
-
     window.mods = {};
+
+    // Left column
     window.mods.clock = new Clock("mod_column_left");
     window.mods.sysinfo = new Sysinfo("mod_column_left");
     window.mods.cpuinfo = new Cpuinfo("mod_column_left");
+
+    // Right column
+    
+
+    document.querySelectorAll(".mod_column").forEach((e) => {
+        e.setAttribute("class", "mod_column activated");
+    });
 };
 
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts

src/assets/css/mod_clock.css

@@ -2,7 +2,7 @@ div#mod_clock {
     display: flex;
     height: 80px;
     padding-top: 7px;
-    border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+    border-top: 1px solid rgba(190, 230, 193, 0.3);
     font-family: var(--font_main_light);
 }
 
@@ -11,7 +11,7 @@ div#mod_clock::before {
     border-left: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     left: -1px;
-    bottom: -76px;
+    top: -12px;
     height: 9px;
 }
 
@@ -20,7 +20,7 @@ div#mod_clock::after {
     border-right: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     right: -1px;
-    bottom: -76px;
+    top: -12px;
     height: 9px;
 }
 

src/assets/css/mod_sysinfo.css

@@ -4,7 +4,7 @@ div#mod_sysinfo {
     align-items: center;
     justify-content: space-between;
     height: 60px;
-    border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+    border-top: 1px solid rgba(190, 230, 193, 0.3);
     font-size: 12px;
     font-family: var(--font_main_light);
     letter-spacing: 1px;
@@ -15,7 +15,7 @@ div#mod_sysinfo::before {
     border-left: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     left: -1px;
-    bottom: -30px;
+    top: -31px;
     height: 9px;
 }
 
@@ -24,7 +24,7 @@ div#mod_sysinfo::after {
     border-right: 1px solid rgba(190, 230, 193, 0.3);
     position: relative;
     right: -1px;
-    bottom: -30px;
+    top: -31px;
     height: 9px;
 }
 

src/classes/sysinfo.class.js

@@ -104,6 +104,7 @@ class Sysinfo {
         document.querySelector("#mod_sysinfo > div:nth-child(2) > h2").innerHTML = uptime.days+":"+uptime.hours+":"+uptime.minutes;
     }
     updateBattery() {
+        // Note: SystemInformation's battery tools seems to be kinda broken (at least on Arch), so we're going with another dep for this one
         let btrlvl = require("battery-level");
         btrlvl().then((level) => {
             document.querySelector("#mod_sysinfo > div:last-child > h2").innerHTML = (level*100)+"%";