Tweaking the server selection UI.

Removed divider. Moved star. Changed version tag back to green.

app/assets/js/actionbinder.js

@@ -97,7 +97,6 @@ document.addEventListener('readystatechange', function(){
             let pVal = 'OFFLINE'
 
             try {
-                console.log(serv)
                 const serverURL = new URL('my://' + serv.server_ip)
                 const servStat = await ServerStatus.getStatus(serverURL.hostname, serverURL.port)
                 if(servStat.online){

app/overlay.ejs

@@ -37,8 +37,8 @@
 }
 
 .serverListing {
-    width: 350px;
-    min-height: 65px;
+    width: 375px;
+    min-height: 60px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -149,7 +149,7 @@
     line-height: 12px;
     height: 12px;
     border-radius: 2px;
-    background: rgb(174, 70, 66);
+    background: rgba(31, 140, 11, 0.8);
     padding: 0px 2px;
 }
 
@@ -161,50 +161,45 @@
     padding: 0px 5px;
 }
 
-.serverListingDivider {
-    min-height: 1px;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.4);
-    margin: 2px 0px;
-}
-
-#starWrap {
+#serverListingStarWrapper {
     display: flex;
-    position: absolute;
     align-items: center;
-    left: 322px;
-    top: 3px;
     cursor: pointer;
+    height: 12px;
+    position: relative;
 }
 
-.tooltiptext {
+.serverListingStarTooltip {
     visibility: hidden;
-    width: 70px;
-    background-color: black;
+    opacity: 0;
+    width: 65px;
+    background-color: rgba(0, 0, 0, 0.40);
     color: #fff;
     text-align: center;
-    padding: 5px 0;
     border-radius: 4px;
     position: absolute;
     z-index: 1;
-    right: 120%;
+    left: 130%;
     font-family: 'Avenir Book';
     font-size: 10px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
 }
 
-.tooltiptext::after {
+.serverListingStarTooltip::after {
     content: " ";
     position: absolute;
     top: 50%;
-    left: 100%; /* To the right of the tooltip */
+    right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: transparent transparent transparent black;
+    border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
 }
 
-#starWrap:hover .tooltiptext {
+#serverListingStarWrapper:hover .serverListingStarTooltip {
     visibility: visible;
+    opacity: 1;
+    transition-delay:0s;
 }
 
 </style>
@@ -220,20 +215,19 @@
                     <div class="serverListingInfo">
                         <div class="serverListingVersion">1.11.2</div>
                         <div class="serverListingRevision">3.4.17</div>
+                        <div id="serverListingStarWrapper">
+                            <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                                <defs>
+                                    <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                                </defs>
+                                <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                                <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                            </svg>
+                            <span class="serverListingStarTooltip">Main Server</span>
+                        </div>
                     </div>
                 </div>
-                <div id="starWrap">
-                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="25px" height="25px">
-                        <defs>
-                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
-                        </defs>
-                        <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
-                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
-                    </svg>
-                    <span class="tooltiptext">Main Server</span>
-                </div>
             </div>
-            <div class="serverListingDivider"></div>
             <div class="serverListing">
                 <img class="serverListingImg" src="./assets/images/testserver.png"/>
                 <div class="serverListingDetails">
@@ -245,7 +239,6 @@
                     </div>
                 </div>
             </div>
-            <div class="serverListingDivider"></div>
             <div class="serverListing">
                 <img class="serverListingImg" src="./assets/images/testserver.png"/>
                 <div class="serverListingDetails">
@@ -257,7 +250,6 @@
                     </div>
                 </div>
             </div>
-            <div class="serverListingDivider"></div>
             <div class="serverListing">
                 <img class="serverListingImg" src="./assets/images/testserver.png"/>
                 <div class="serverListingDetails">