Beginning to refactor stylesheets. Convert main menu to use buttons instead of a elements

css/buttons.scss

@@ -0,0 +1,83 @@
+@import "mixins";
+@import "theme";
+
+/**
+ * Styling for all buttons
+ *
+ * Includes <button> elements as well as classes that are used
+ * for formatting buttons
+ */
+
+/* Remove default <button> styling */
+button {
+    border: none;
+}
+
+.a-link-button,
+.std-button {
+    text-decoration: none;
+    background-color: #555;
+    color: #fff;
+    padding: 3px 5px;
+    margin: 5px;
+    border: 1px solid #333;
+
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+
+    &:hover {
+        background-color: #666;
+    }
+
+    &:active {
+        @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
+    }
+}
+
+.a-link-button-inactive,
+.std-button:disabled {
+    text-decoration: none;
+    background-color: #333;
+    color: #fff;
+    padding: 3px 5px;
+    margin: 5px;
+    border: 1px solid #333;
+    cursor: default;
+
+    &:hover {
+        .tooltiptext,
+        .tooltiptexthigh,
+        .tooltiptextleft {
+            visibility: visible;
+        }
+    }
+
+    &:active {
+        pointer-events: none;
+    }
+}
+
+.a-link-button-bought,
+.std-button-bought {
+    text-decoration: none;
+    background-color: #0a0;
+    color: #fff;
+    padding: 3px 5px;
+    margin: 5px;
+    border: 1px solid #0a0;
+    cursor: default;
+
+    &:hover {
+        .tooltiptext,
+        .tooltiptexthigh,
+        .tooltiptextleft {
+            visibility: visible;
+        }
+    }
+
+    &:active {
+        pointer-events: none;
+    }
+}

css/mainmenu.scss

@@ -0,0 +1,118 @@
+@import "mixins";
+@import "theme";
+
+/**
+ * Styling for the main navigation menu on the left-hand-side
+ */
+
+.mainmenu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 10%;
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+
+    border: 0;
+    border-bottom: 1px solid #000;
+    border-radius: 0;
+    background-color: #333;
+}
+
+/* Default buttons */
+.mainmenu > li a,
+.mainmenu > li button {
+    display: block;
+    color: #e6e6e6;
+    background-color: #555;
+    padding: 12px 8px;
+
+    text-decoration: none;
+    width: 100%;
+    text-align: left;
+}
+
+.mainmenu.classic > li a,
+.mainmenu.classic > li button {
+    padding: 16px;
+}
+
+/* Hovering makes them lighter */
+.mainmenu > li a:hover,
+.mainmenu > li a:hover:not(.active),
+.mainmenu > li a:focus {
+    background-color: #777;
+    color: #fff;
+}
+
+.mainmenu > li button:hover,
+.mainmenu > li button:hover:not(.active) {
+    background-color: #777;
+    color: #fff;
+}
+
+/* Panel headers can become active, and they are "lighter" than the rest */
+.mainmenu > li a.active,
+.mainmenu > li button.active {
+    background-color: #777;
+    color: #fff;
+}
+
+.mainmenu > li a.active:hover,
+.mainmenu > li button.active:hover {
+    background-color: #aaa;
+}
+
+#hacking-menu-header-li,
+#character-menu-header-li,
+#world-menu-header-li,
+#help-menu-header-li {
+    position: relative;
+}
+
+/* Accordion Outline */
+.mainmenu-accordion-header {
+    outline: 2px solid #fff !important;
+}
+
+.mainmenu-accordion-header-classic {
+    border: 2px solid #fff;
+    padding: 16px !important;
+}
+
+/* Plus and minus signs */
+.mainmenu-accordion-header:after {
+    content: '\02795';
+    float: right;
+    font-size: $defaultFontSize * 0.8125;
+    position: absolute;
+    bottom: 25%;
+    right: 3px;
+    color: transparent;
+    text-shadow: 0 0 0 #fff;
+}
+
+.mainmenu-accordion-header-classic:after {
+    content: '\02795';
+    float: right;
+    font-size: $defaultFontSize * 0.8125;
+    color: #fff;
+    margin-left: 5px;
+}
+
+.mainmenu-accordion-header.opened,
+.mainmenu-accordion-header-classic.opened {
+    background-color: #222;
+
+    &:after {
+        content: "\2796";
+    }
+}
+
+/* Slide down transition */
+.mainmenu-accordion-panel {
+    max-height: 0;
+    opacity: 1;
+    transition: max-height 0.2s ease-out;
+}

css/popupboxes.scss

@@ -22,16 +22,6 @@
     border: 5px solid var(--my-highlight-color);
     width: 70%;
     max-height: 80%;
-    /*
-    margin: auto;
-    height:auto;
-    max-height:80%;
-    position:absolute;
-    top:0;
-    left:0;
-    bottom:0;
-    right:0;
-    */
     overflow-y: auto;
     color: var(--my-font-color);
 }

css/styles.scss

@@ -40,16 +40,6 @@ span {
     padding: 4px;
 }
 
-button[type="button"] {
-    @include transform(translateX(-50%));
-
-    padding: 0.5rem 1rem;
-    position: absolute;
-    z-index: 1;
-    bottom: 10px;
-    left: 50%;
-}
-
 #entire-game-container {
     background-color: transparent;
 }
@@ -63,181 +53,12 @@ tr:focus {
     outline: none;
 }
 
-/* Main navigation menu */
-.mainmenu {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    width: 10%;
-    position: fixed;
-    height: 100%;
-    overflow: auto;
-
-    border: 0;
-    border-bottom: 1px solid #000;
-    border-radius: 0;
-    background-color: #333;
-}
-
-/* Default buttons */
-.mainmenu > li a {
-    display: block;
-    color: #e6e6e6;
-    background-color: #555;
-    padding: 12px 8px;
-
-    text-decoration: none;
-}
-
-.mainmenu.classic > li a {
-    padding: 16px;
-}
-
-/* Hovering makes them lighter */
-.mainmenu > li a:hover,
-.mainmenu > li a:hover:not(.active),
-.mainmenu > li a:focus {
-    background-color: #777;
-    color: #fff;
-}
-
-/* Panel headers can become active, and they are "lighter" than the rest */
-.mainmenu > li a.active {
-    background-color: #777;
-    color: #fff;
-}
-
-.mainmenu > li a.active:hover {
-    background-color: #aaa;
-}
-
-#hacking-menu-header-li,
-#character-menu-header-li,
-#world-menu-header-li,
-#help-menu-header-li {
-    position: relative;
-}
-
-/* Accordion Outline */
-.mainmenu-accordion-header {
-    outline: 2px solid #fff;
-}
-
-.mainmenu-accordion-header-classic {
-    border: 2px solid #fff;
-    padding: 16px !important;
-}
-
-/* Plus and minus signs */
-.mainmenu-accordion-header:after {
-    content: '\02795';
-    float: right;
-    font-size: $defaultFontSize * 0.8125;
-    position: absolute;
-    bottom: 25%;
-    right: 3px;
-    color: transparent;
-    text-shadow: 0 0 0 #fff;
-}
-
-.mainmenu-accordion-header-classic:after {
-    content: '\02795';
-    float: right;
-    font-size: $defaultFontSize * 0.8125;
-    color: #fff;
-    margin-left: 5px;
-}
-
-.mainmenu-accordion-header.opened,
-.mainmenu-accordion-header-classic.opened {
-    background-color: #222;
-
-    &:after {
-        content: "\2796";
-    }
-}
-
-/* Slide down transition */
-.mainmenu-accordion-panel {
-    max-height: 0;
-    opacity: 1;
-    transition: max-height 0.2s ease-out;
-}
-
 /* Make html links ("a" elements) nice looking buttons with this class */
 a:link,
 a:visited {
     color: #fff;
 }
 
-.a-link-button {
-    text-decoration: none;
-    background-color: #555;
-    color: #fff;
-    padding: 3px 5px;
-    margin: 5px;
-    border: 1px solid #333;
-
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-
-    &:hover {
-        background-color: #666;
-    }
-
-    &:active {
-        @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
-    }
-}
-
-/* Make anchor tags ("a" elements) inactive (not clickable) */
-.a-link-button-inactive {
-    text-decoration: none;
-    background-color: #333;
-    color: #fff;
-    padding: 3px 5px;
-    margin: 5px;
-    border: 1px solid #333;
-    cursor: default;
-
-    &:hover {
-        .tooltiptext,
-        .tooltiptexthigh,
-        .tooltiptextleft {
-            visibility: visible;
-        }
-    }
-
-    &:active {
-        pointer-events: none;
-    }
-}
-
-/* Make anchor tags ("a" elements) for activated actions */
-.a-link-button-bought {
-    text-decoration: none;
-    background-color: #0a0;
-    color: #fff;
-    padding: 3px 5px;
-    margin: 5px;
-    border: 1px solid #0a0;
-    cursor: default;
-
-    &:hover {
-        .tooltiptext,
-        .tooltiptexthigh,
-        .tooltiptextleft {
-            visibility: visible;
-        }
-    }
-
-    &:active {
-        pointer-events: none;
-    }
-}
-
 .dropdown {
     color: #fff;
     background-color: #000;

package-lock.json

@@ -7392,6 +7392,11 @@
         "sort-keys": "1.1.2"
       }
     },
+    "normalize.css": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz",
+      "integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "loader-runner": "^2.3.0",
     "loader-utils": "^1.1.0",
     "memory-fs": "~0.4.1",
+    "normalize.css": "^8.0.0",
     "numeral": "2.0.6",
     "sprintf-js": "^1.1.1",
     "tapable": "^1.0.0",

src/CompanyManagement.js

@@ -3533,7 +3533,7 @@ Corporation.prototype.updateUIHeaderTabs = function() {
             content.appendChild(yesBtn);
             container.appendChild(content);
             document.getElementById("entire-game-container").appendChild(container);
-            container.style.display = "block";
+            container.style.display = "flex";
             return false;
         }
     }));

src/engine.js

@@ -76,7 +76,10 @@ import {Page, routing}                                  from "./ui/navigationTra
 
 // These should really be imported with the module that is presenting that UI, but because they very much depend on the
 // cascade order, we'll pull them all in here.
+import 'normalize.css';
 import "../css/styles.scss";
+import "../css/buttons.scss";
+import "../css/mainmenu.scss";
 import "../css/terminal.scss";
 import "../css/menupages.scss";
 import "../css/workinprogress.scss";

src/index.html

@@ -35,73 +35,73 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
         <ul id="mainmenu" class="mainmenu">
             <!-- Hacking dropdown -->
             <li id="hacking-menu-header-li">
-                <a id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </a>
+                <button id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </button>
             </li>
             <li id="terminal-tab" class="mainmenu-accordion-panel">
-                <a id="terminal-menu-link"> Terminal </a>
+                <button id="terminal-menu-link"> Terminal </button>
             </li>
             <li id="create-script-tab" class="mainmenu-accordion-panel">
-                <a id="create-script-menu-link"> Create Script </a>
+                <button id="create-script-menu-link"> Create Script </button>
             </li>
             <li id="active-scripts-tab" class="mainmenu-accordion-panel">
-                <a id="active-scripts-menu-link"> Active Scripts </a>
+                <button id="active-scripts-menu-link"> Active Scripts </button>
             </li>
             <li id="create-program-tab" class="mainmenu-accordion-panel">
-                <a id="create-program-menu-link"> Create Program </a>
+                <button id="create-program-menu-link"> Create Program </button>
                 <span id="create-program-notification" class="notification-off"> </span>
             </li>
 
             <!-- Character dropdown -->
             <li id="character-menu-header-li">
-                <a id="character-menu-header" class="mainmenu-accordion-header"> Character </a>
+                <button id="character-menu-header" class="mainmenu-accordion-header"> Character </button>
             </li>
             <li id="stats-tab" class="mainmenu-accordion-panel">
-                <a id="stats-menu-link"> Stats </a>
+                <button id="stats-menu-link"> Stats </button>
             </li>
             <li id="factions-tab" class="mainmenu-accordion-panel">
-                <a id="factions-menu-link"> Factions </a>
+                <button id="factions-menu-link"> Factions </button>
             </li>
             <li id="augmentations-tab" class="mainmenu-accordion-panel">
-                <a id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </a>
+                <button id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </button>
             </li>
             <li id="hacknet-nodes-tab" class="mainmenu-accordion-panel">
-                <a id="hacknet-nodes-menu-link"> Hacknet Nodes </a>
+                <button id="hacknet-nodes-menu-link"> Hacknet Nodes </button>
             </li>
 
             <!-- World dropdown -->
             <li id="world-menu-header-li">
-                <a id="world-menu-header" class="mainmenu-accordion-header">World</a>
+                <button id="world-menu-header" class="mainmenu-accordion-header">World</button>
             </li>
 			<li id="city-tab" class="mainmenu-accordion-panel">
-                <a id="city-menu-link"> City </a>
+                <button id="city-menu-link"> City </button>
             </li>
             <li id="travel-tab" class="mainmenu-accordion-panel">
-                <a id="travel-menu-link">Travel</a>
+                <button id="travel-menu-link"> Travel </button>
             </li>
             <li id="job-tab" class="mainmenu-accordion-panel">
-                <a id="job-menu-link">Job</a>
+                <button id="job-menu-link"> Job </button>
             </li>
             <li id="bladeburner-tab" class="mainmenu-accordion-panel">
-                <a id="bladeburner-menu-link"> Bladeburner </a>
+                <button id="bladeburner-menu-link"> Bladeburner </button>
             </li>
             <li id="corporation-tab" class="mainmenu-accordion-panel">
-                <a id="corporation-menu-link"> Corp </a>
+                <button id="corporation-menu-link"> Corp </button>
             </li>
             <li id="gang-tab" class="mainmenu-accordion-panel">
-                <a id="gang-menu-link"> Gang </a>
+                <button id="gang-menu-link"> Gang </button>
             </li>
 
             <li id="help-menu-header-li">
-                <a id="help-menu-header" class="mainmenu-accordion-header">Help</a>
+                <button id="help-menu-header" class="mainmenu-accordion-header"> Help </button>
             </li>
 			<li id="tutorial-tab" class="mainmenu-accordion-panel">
-				<a id="tutorial-menu-link"> Tutorial </a>
+				<button id="tutorial-menu-link"> Tutorial </button>
 			</li>
             <li id="options-tab" class="mainmenu-accordion-panel">
-                <a id="options-menu-link"> Options </a>
+                <button id="options-menu-link"> Options </button>
             </li>
             <li id="dev-tab" class="mainmenu-accordion-panel">
-                <a id="dev-menu-link"> Dev </a>
+                <button id="dev-menu-link"> Dev </button>
             </li>
         </ul>
     </div>