Merge pull request #360 from kopelli/scss

Incorporate SCSS for styling/bundling

.gitignore

@@ -5,3 +5,4 @@ Netburner.txt
 /dist/*.map
 /tests/*.map
 /tests/*.bundle.*
+/tests/*.css

css/_mixins.scss

@@ -0,0 +1,61 @@
+@mixin animation($property) {
+    -webkit-animation: $property;
+    -moz-animation: $property;
+    -ms-animation: $property;
+    -o-animation: $property;
+    animation: $property;
+}
+
+@mixin borderRadius($property) {
+    -webkit-border-radius: $property;
+    -moz-border-radius: $property;
+    border-radius: $property;
+}
+
+@mixin boxShadow($value) {
+    -webkit-box-shadow: $value;
+    -moz-box-shadow: $value;
+    box-shadow: $value;
+}
+
+@mixin keyframes($animationName) {
+    @-webkit-keyframes #{$animationName} {
+        $browser: '-webkit-' !global;
+        @content;
+    }
+
+    @-moz-keyframes #{$animationName} {
+        $browser: '-moz-' !global;
+        @content;
+    }
+
+    @-ms-keyframes #{$animationName} {
+        $browser: '-ms-' !global;
+        @content;
+    }
+
+    @-o-keyframes #{$animationName} {
+        $browser: '-o-' !global;
+        @content;
+    }
+
+    @keyframes #{$animationName} {
+        $browser: '' !global;
+        @content;
+    }
+}
+
+@mixin transform($property) {
+    -webkit-transform: $property;
+    -moz-transform: $property;
+    -ms-transform: $property;
+    -o-transform: $property;
+    transform: $property;
+}
+
+@mixin userSelect($value) {
+    -webkit-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}

css/_reset.scss

@@ -0,0 +1,15 @@
+@import "theme";
+
+* {
+    font-size: $defaultFontSize;
+    font-family: $fontFamily;
+}
+
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    vertical-align: top;
+}

css/_theme.scss

@@ -0,0 +1,2 @@
+$fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
+$defaultFontSize: 16px;

css/bladeburner.scss

@@ -1,9 +1,13 @@
-#bladeburner-container p,
+@import "theme";
-#bladeburner-container pre,
+
-#bladeburner-container a,
+#bladeburner-container {
-#bladeburner-container div,
+    a,
-#bladeburner-container td {
+    div,
-    font-size: 13px;
+    p,
+    pre,
+    td {
+        font-size: $defaultFontSize * 0.8125;
+    }
 }
 
 .bladeburner-action {
@@ -11,10 +15,10 @@
     margin: 7px;
     padding: 7px;
     white-space: pre-wrap;
-}
 
-.bladeburner-action pre {
+    pre {
-    white-space: pre-wrap;
+        white-space: pre-wrap;
+    }
 }
 
 /* Whatever action is currently active */
@@ -23,21 +27,25 @@
 }
 
 /* Action & Skills panel navigation button */
-.bladeburner-nav-button {
+%bladburner-nav-button {
     border: 1px solid #fff;
-    color: #fff;
-    padding: 2px;
     margin: 2px;
+    padding: 2px;
 }
 
-.bladeburner-nav-button:hover {
+.bladeburner-nav-button {
-    background-color: #3d4044;
+    @extend %bladburner-nav-button;
+
+    color: #fff;
+
+    &:hover {
+        background-color: #3d4044;
+    }
 }
 
 .bladeburner-nav-button-inactive {
-    border: 1px solid #fff;
+    @extend %bladburner-nav-button;
-    padding: 2px;
+
-    margin: 2px;
     text-decoration: none;
     background-color: #555;
     cursor: default;
@@ -76,7 +84,7 @@
     margin: 0 !important;
     border: 0;
     background-color: var(--my-background-color);
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     outline: none;
     color: var(--my-font-color);
     flex: 1 1 auto;

css/companymanagement.scss

@@ -1,7 +1,10 @@
+@import "mixins";
+@import "theme";
+
 #cmpy-mgmt-container p,
 #cmpy-mgmt-container a,
 #cmpy-mgmt-container div {
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
 }
 
 /* Header tabs */
@@ -118,10 +121,14 @@
     margin: 2px;
     padding: 6px;
     border-radius: 25px;
-    font-size: "12px";
+    font-size: $defaultFontSize * 0.75;
     color: var(--my-font-color);
 }
 
 .cmpy-mgmt-upgrade-div:hover {
     background-color: #333;
 }
+
+.cmpy-mgmt-advertising-info {
+    font-size: $defaultFontSize * 0.75;
+}

css/interactivetutorial.scss

@@ -1,3 +1,6 @@
+@import "mixins";
+@import "theme";
+
 /* interactivetutorial.css */
 #interactive-tutorial-wrapper {
     position: relative;
@@ -15,10 +18,10 @@
     overflow: auto; /* Enable scroll if needed */
     background-color: #444; /* Fallback color */
     color: #fff;
-}
 
-#interactive-tutorial-container > strong {
+    > strong {
-    background-color: #444;
+        background-color: #444;
+    }
 }
 
 #interactive-tutorial-text {
@@ -31,16 +34,20 @@
 #interactive-tutorial-exit,
 #interactive-tutorial-next,
 #interactive-tutorial-back {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     color: #aaa;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
     background-color: #000;
+
+    &:hover,
+    &:focus {
+        color: #fff;
+        text-decoration: none;
+        cursor: pointer;
+    }
 }
 
 #interactive-tutorial-exit {
@@ -55,14 +62,3 @@
 #interactive-tutorial-next {
     float: right;
 }
-
-#interactive-tutorial-exit:hover,
-#interactive-tutorial-exit:focus,
-#interactive-tutorial-next:hover,
-#interactive-tutorial-next:focus,
-#interactive-tutorial-back:hover,
-#interactive-tutorial-back:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
-}

css/loader.css

@@ -1,148 +0,0 @@
-@-webkit-keyframes LOADERSPINNER {
-    0%   { -webkit-transform: translate(-50%, -50%) rotate(0deg); }
-    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); }
-}
-@-moz-keyframes LOADERSPINNER {
-    0%   { -moz-transform: translate(-50%, -50%) rotate(0deg); }
-    100% { -moz-transform: translate(-50%, -50%) rotate(360deg); }
-}
-@-ms-keyframes LOADERSPINNER {
-    0%   { -ms-transform: translate(-50%, -50%) rotate(0deg); }
-    100% { -ms-transform: translate(-50%, -50%) rotate(360deg); }
-}
-@-o-keyframes LOADERSPINNER {
-    0%   { -o-transform: translate(-50%, -50%) rotate(0deg); }
-    100% { -o-transform: translate(-50%, -50%) rotate(360deg); }
-}
-@keyframes LOADERSPINNER {
-    0%   { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
-@-webkit-keyframes LOADERLABEL {
-    0%   { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); }
-    5%   { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); }
-    95%  { opacity: 0.5; -webkit-transform: translate(-50%, -50%) scale(0.5); }
-    100% { opacity: 1.0; -webkit-transform: translate(-50%, -50%) scale(1.0); }
-}
-@-moz-keyframes LOADERLABEL {
-    0%   { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); }
-    5%   { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); }
-    95%  { opacity: 0.5; -moz-transform: translate(-50%, -50%) scale(0.5); }
-    100% { opacity: 1.0; -moz-transform: translate(-50%, -50%) scale(1.0); }
-}
-@-ms-keyframes LOADERLABEL {
-    0%   { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); }
-    5%   { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); }
-    95%  { opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(0.5); }
-    100% { opacity: 1.0; -ms-transform: translate(-50%, -50%) scale(1.0); }
-}
-@-o-keyframes LOADERLABEL {
-    0%   { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); }
-    5%   { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); }
-    95%  { opacity: 0.5; -o-transform: translate(-50%, -50%) scale(0.5); }
-    100% { opacity: 1.0; -o-transform: translate(-50%, -50%) scale(1.0); }
-}
-@keyframes LOADERLABEL {
-    0%   { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); }
-    5%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
-    95%  { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
-    100% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.0); }
-}
-
-*, *:before, *:after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    vertical-align: top;
-}
-.loaderoverlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 1.0);
-}
-.loaderoverlay .loaderspinner,
-.loaderoverlay .loaderspinner:before,
-.loaderoverlay .loaderspinner:after {
-    border: 20px solid rgba(0, 0, 0, 0);
-    border-top: 20px solid #ccc;
-    border-bottom: 20px solid #ccc;
-    border-radius: 1000px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-}
-.loaderoverlay .loaderspinner:before,
-.loaderoverlay .loaderspinner:after {
-    content: "";
-}
-.loaderoverlay .loaderspinner {
-    width: 200px;
-    height: 200px;
-    -webkit-animation: LOADERSPINNER 5s linear infinite;
-    -moz-animation: LOADERSPINNER 5s linear infinite;
-    -ms-animation: LOADERSPINNER 5s linear infinite;
-    -o-animation: LOADERSPINNER 5s linear infinite;
-    animation: LOADERSPINNER 5s linear infinite;
-}
-.loaderoverlay .loaderspinner:before {
-    width: 160px;
-    height: 160px;
-    -webkit-animation: LOADERSPINNER 10s linear infinite;
-    -moz-animation: LOADERSPINNER 10s linear infinite;
-    -ms-animation: LOADERSPINNER 10s linear infinite;
-    -o-animation: LOADERSPINNER 10s linear infinite;
-    animation: LOADERSPINNER 10s linear infinite;
-}
-.loaderoverlay .loaderspinner:after {
-    width: 120px;
-    height: 120px;
-    -webkit-animation: LOADERSPINNER 5s linear infinite;
-    -moz-animation: LOADERSPINNER 5s linear infinite;
-    -ms-animation: LOADERSPINNER 5s linear infinite;
-    -o-animation: LOADERSPINNER 5s linear infinite;
-    animation: LOADERSPINNER 5s linear infinite;
-}
-.loaderoverlay .loaderlabel {
-    color: #6f3;
-    text-transform: uppercase;
-    font-family: sans-serif;
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-animation: LOADERLABEL 5s linear infinite;
-    -moz-animation: LOADERLABEL 5s linear infinite;
-    -ms-animation: LOADERLABEL 5s linear infinite;
-    -o-animation: LOADERLABEL 5s linear infinite;
-    animation: LOADERLABEL 5s linear infinite;
-}
-button[type="button"] {
-    padding: 0.5rem 1rem;
-    position: absolute;
-    z-index: 1;
-    bottom: 10px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -moz-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    -o-transform: translateX(-50%);
-    transform: translateX(-50%);
-}
-
-/* Customize */
-.loaderoverlay {
-    background: #000;
-}
-.loaderoverlay .loaderspinner,
-.loaderoverlay .loaderspinner:before,
-.loaderoverlay .loaderspinner:after {
-    border-top-color: #6f3 !important;
-    border-bottom-color: #6f3 !important;
-}
-.loaderoverlay .loaderlabel {
-    color: #6f3;
-}

css/loader.scss

@@ -0,0 +1,94 @@
+@import "mixins";
+@import "reset";
+@import "theme";
+
+@include keyframes(LOADERSPINNER) {
+    0% {
+        #{$browser}transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        #{$browser}transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@include keyframes(LOADERLABEL) {
+    0% {
+        opacity: 1.0;
+        #{$browser}transform: translate(-50%, -50%) scale(1.0);
+    }
+    5% {
+        opacity: 0.5;
+        #{$browser}transform: translate(-50%, -50%) scale(0.5);
+    }
+    95% {
+        opacity: 0.5;
+        #{$browser}transform: translate(-50%, -50%) scale(0.5);
+    }
+    100% {
+        opacity: 1.0;
+        #{$browser}transform: translate(-50%, -50%) scale(1.0);
+    }
+}
+
+.loaderoverlay {
+    $spinnerBoxSize: 200px;
+    $themeColor: #6f3;
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    color: $themeColor;
+
+    %spinnerBox {
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-top-color: $themeColor;
+        border-bottom-color: $themeColor;
+        border-radius: 1000px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+    }
+
+    .loaderspinner:before,
+    .loaderspinner:after {
+        content: "";
+    }
+
+    .loaderspinner {
+        @extend %spinnerBox;
+        @include animation(LOADERSPINNER 5s linear infinite);
+
+        width: $spinnerBoxSize;
+        height: $spinnerBoxSize;
+    }
+
+    .loaderspinner:before {
+        @extend %spinnerBox;
+        @include animation(LOADERSPINNER 10s linear infinite);
+
+        width: $spinnerBoxSize * 0.8;
+        height: $spinnerBoxSize * 0.8;
+    }
+
+    .loaderspinner:after {
+        @extend %spinnerBox;
+        @include animation(LOADERSPINNER 5s linear infinite);
+
+        width: $spinnerBoxSize * 0.6;
+        height: $spinnerBoxSize * 0.6;
+    }
+
+    .loaderlabel {
+        @include animation(LOADERLABEL 5s linear infinite);
+
+        text-transform: uppercase;
+        font-family: sans-serif;
+        font-size: $defaultFontSize * 1.375;
+        font-weight: 700;
+        letter-spacing: 2px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+    }
+}

css/menupages.scss

@@ -1,3 +1,6 @@
+@import "mixins";
+@import "theme";
+
 /* CSS for different main menu pages, such as character info, script editor, etc (but excluding
     terminal which has its own page) */
 
@@ -32,7 +35,7 @@
 
     border: 2px solid var(--my-highlight-color);
     z-index: 1;
-    font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
+    font-family: $fontFamily;
 }
 
 .ace_line,
@@ -43,7 +46,7 @@
 }
 
 .ace_text-input {
-    font-size: 16px;
+    font-size: $defaultFontSize;
     background-color: transparent;
 }
 
@@ -89,6 +92,9 @@
 }
 
 #script-editor-filename {
+    $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
+    @include boxShadow($boxShadowArgs);
+
     background-color: #555;
     display: inline-block;
     float: center;
@@ -99,15 +105,6 @@
     padding: 2px;
 
     border: 2px solid var(--my-highlight-color);
-    -webkit-box-shadow:
-        inset 0 0 8px rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow:
-        inset 0 0 8px rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
-    box-shadow:
-        inset 0 0 8px rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
 }
 
 #script-editor-status {
@@ -132,7 +129,7 @@
     margin-top: 8px;
     margin-bottom: 8px;
     padding: 2px;
-    font-size: 12px;
+    font-size: $defaultFontSize * 0.75;
 }
 
 /* Active scripts */
@@ -154,7 +151,7 @@
 
 .active-scripts-server-header {
     background-color: #444;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     color: #fff;
     margin: 6px 6px 0 6px;
     padding: 6px;
@@ -176,7 +173,7 @@
 
 .active-scripts-server-header:after {
     content: '\02795'; /* "plus" sign (+) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: #fff;
     float: right;
     margin-left: 5px;
@@ -184,7 +181,7 @@
 
 .active-scripts-server-header.active:after {
     content: "\2796"; /* "minus" sign (-) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: #fff;
     float: right;
     margin-left: 5px;
@@ -227,7 +224,7 @@
 
 .active-scripts-script-header:after {
     content: '\02795'; /* "plus" sign (+) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: var(--my-font-color);
     float: right;
     margin-left: 5px;
@@ -235,7 +232,7 @@
 
 .active-scripts-script-header.active:after {
     content: "\2796"; /* "minus" sign (-) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: var(--my-font-color);
     float: right;
     margin-left: 5px;
@@ -260,15 +257,12 @@
 }
 
 .active-scripts-button {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     color: #aaa;
-    font-size: 16px;
+    font-size: $defaultFontSize;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
     margin: 4px;
     padding: 4px;
     background-color: #000;
@@ -323,19 +317,13 @@
 }
 
 .hacknet-node {
+    $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1);
+    @include boxShadow($boxShadowArgs);
+
     margin: 6px;
     padding: 6px;
     width: 34vw;
     border: 2px solid var(--my-highlight-color);
-    -webkit-box-shadow:
-        inset 0 0 8px  rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow:
-        inset 0 0 8px  rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
-    box-shadow:
-        inset 0 0 8px  rgba(0, 0, 0, 0.1),
-        0 0 16px rgba(0, 0, 0, 0.1);
 }
 
 .hacknet-node-container {
@@ -355,7 +343,7 @@
     display: inline-block;
     margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */
     padding: 0 4px;
-    width: 48px; /* Four times font-size */
+    width: $defaultFontSize * 4;
 }
 
 .menu-page-text {

css/missions.scss

@@ -1,3 +1,6 @@
+@import "mixins";
+@import "theme";
+
 /* css for Missions */
 
 /* Hacking missions */
@@ -15,10 +18,10 @@
     width: 100%;
     overflow-y: auto;
     padding-right: 10px;
-}
 
-.hack-mission-grid::-webkit-scrollbar {
+    &::-webkit-scrollbar {
-    display: none;
+        display: none;
+    }
 }
 
 .hack-mission-node {
@@ -27,17 +30,15 @@
     align-self: center;
     justify-self: center;
     display: inline-block;
-}
 
-.hack-mission-node p {
+    p {
-    margin-top: 8px;
+        @include userSelect(none);
-    color: #fff;
+
-    font-size: 12px;
+        margin-top: 8px;
-    text-align: center;
+        color: #fff;
-    -webkit-user-select: none;
+        font-size: $defaultFontSize * 0.75;
-    -moz-user-select: none;
+        text-align: center;
-    -ms-user-select: none;
+    }
-    user-select: none;
 }
 
 .hack-mission-player-node {
@@ -56,11 +57,9 @@
 }
 
 .hack-mission-cpu-node {
+    @include borderRadius(50%);
     width: 100%;
     height: 100%;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
 }
 
 .hack-mission-firewall-node {
@@ -69,47 +68,37 @@
 }
 
 .hack-mission-database-node {
+    @include transform(skew(20deg));
+
     width: 100%;
     height: 90%;
-    -webkit-transform: skew(20deg);
-    -moz-transform: skew(20deg);
-    -o-transform: skew(20deg);
-}
 
-.hack-mission-database-node p {
+    p {
-    -webkit-transform: skew(-20deg);
+        @include transform(skew(-20deg));
-    -moz-transform: skew(-20deg);
+        @include userSelect(none);
-    -o-transform: skew(-20deg);
+
-    color: #fff;
+        color: #fff;
-    font-size: 12px;
+        font-size: $defaultFontSize * 0.75;
-    margin-top: 8px;
+        margin-top: 8px;
-    text-align: center;
+        text-align: center;
-    -webkit-user-select: none;
+    }
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
 }
 
 .hack-mission-transfer-node {
+    @include transform(skew(-20deg));
+
     width: 100%;
     height: 90%;
-    -webkit-transform: skew(-20deg);
-    -moz-transform: skew(-20deg);
-    -o-transform: skew(-20deg);
-}
 
-.hack-mission-transfer-node p {
+    p {
-    -webkit-transform: skew(20deg);
+        @include transform(skew(20deg));
-    -moz-transform: skew(20deg);
+        @include userSelect(none);
-    -o-transform: skew(20deg);
+
-    color: #fff;
+        color: #fff;
-    font-size: 12px;
+        font-size: $defaultFontSize * 0.75;
-    margin-top: 8px;
+        margin-top: 8px;
-    text-align: center;
+        text-align: center;
-    -webkit-user-select: none;
+    }
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
 }
 
 .hack-mission-spam-node,

css/popupboxes.scss

@@ -1,3 +1,6 @@
+@import "mixins";
+@import "theme";
+
 /* Pop-up boxes */
 .popup-box-container {
     display: none; /* Hidden by default */
@@ -24,7 +27,7 @@
 .popup-box-button-inactive {
     color: #aaa;
     float: right;
-    font-size: 16px;
+    font-size: $defaultFontSize;
     font-weight: bold;
     padding: 2px;
     margin: 6px;
@@ -74,16 +77,13 @@
 }
 
 .dialog-box-close-button {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     float: right;
     color: #aaa;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
 }
 
 #log-box-close {
@@ -155,18 +155,15 @@
 }
 
 #game-options-close-button {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     color: #aaa;
     float: right;
     margin: 4px;
     padding: 4px;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px #fff;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
 }
 
 #game-options-close-button:hover,

css/styles.scss

@@ -1,16 +1,14 @@
+@import "mixins";
+@import "theme";
+
+@import "reset";
+
 :root{
     --my-font-color: #6f3;
     --my-background-color: #000;
     --my-highlight-color: #fff;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-    font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
-}
-
 body {
     background-color: var(--my-background-color);
 }
@@ -23,7 +21,7 @@ h2,
 }
 
 h1 {
-    font-size: 22px;
+    font-size: $defaultFontSize * 1.375;
     color: var(--my-font-color);
 }
 
@@ -41,6 +39,16 @@ 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;
 }
@@ -100,7 +108,7 @@ tr:focus {
 /* Plus and minus signs */
 .mainmenu-accordion-header:after {
     content: '\02795';
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: #fff;
     float: right;
     margin-left: 5px;
@@ -127,7 +135,8 @@ tr:focus {
 }
 
 /* Make html links ("a" elements) nice looking buttons with this class */
-a:link, a:visited {
+a:link,
+a:visited {
     color: #fff;
 }
 
@@ -150,9 +159,7 @@ a:link, a:visited {
 }
 
 .a-link-button:active {
-    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+    @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
-    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
 }
 
 /* Make anchor tags ("a" elements) inactive (not clickable) */
@@ -212,7 +219,7 @@ a:link, a:visited {
     position: relative;
 }
 #create-program-notification {
-    font-size: 10px;
+    font-size: $defaultFontSize * 0.625;
 
     position: absolute; /* Position the badge within the relatively positioned button */
     top: 0;
@@ -308,9 +315,7 @@ a:link, a:visited {
 }
 
 .help-tip:active {
-    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+    @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
-    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
 }
 
 /* Flashing button (Red) */
@@ -408,7 +413,7 @@ a:link, a:visited {
 }
 
 #status-text {
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     color: #fff;
     right: 0;
     bottom: 0;
@@ -446,15 +451,12 @@ a:link, a:visited {
 
 #character-overview-save-button,
 #character-overview-options-button {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     color: #aaa;
-    font-size: 14px;
+    font-size: $defaultFontSize * 0.875;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
     height: 22px;
     background-color: #000;
 }
@@ -485,7 +487,7 @@ a:link, a:visited {
 /* Accordion menus (Header with collapsible panel) */
 .accordion-header {
     background-color: #444;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     color: #fff;
     margin: 6px 6px 0 6px;
     padding: 6px;
@@ -507,7 +509,7 @@ a:link, a:visited {
 
 .accordion-header:after {
     content: '\02795'; /* "plus" sign (+) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: #fff;
     float: right;
     margin-left: 5px;
@@ -515,7 +517,7 @@ a:link, a:visited {
 
 .accordion-header.active:after {
     content: "\2796"; /* "minus" sign (-) */
-    font-size: 13px;
+    font-size: $defaultFontSize * 0.8125;
     color: #fff;
     float: right;
     margin-left: 5px;

css/terminal.scss

@@ -1,3 +1,5 @@
+@import "theme";
+
 #terminal-container {
     position: fixed;
     margin-left: 10%;
@@ -12,7 +14,7 @@
     padding-left: 10px;
     height: auto;
     width: 70%;
-    font-size: 16px;
+    font-size: $defaultFontSize;
     overflow: auto;
     overflow-y: scroll;
     background-color: var(--my-background-color);
@@ -31,7 +33,7 @@
     margin: 0 !important;
     border: 0;
     background-color: var(--my-background-color);
-    font-size: 16px;
+    font-size: $defaultFontSize;
     outline: none;
     color: var(--my-font-color);
 }

css/workinprogress.scss

@@ -1,3 +1,6 @@
+@import "mixins";
+@import "theme";
+
 /* Both Work in progress and BitNode stuff */
 .generic-fullscreen-container {
     color: var(--my-font-color);
@@ -16,19 +19,16 @@
 }
 
 #work-in-progress-cancel-button {
+    @include borderRadius(12px);
+    @include boxShadow(1px 1px 3px #000);
+
     color: #aaa;
     float: left;
-    font-size: 20px;
+    font-size: $defaultFontSize * 1.25;
     font-weight: bold;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
     margin: 10px;
     padding: 5px;
-    border-radius: 12px;
     border: 3px solid #fff;
-    -moz-box-shadow: 1px 1px 3px #000;
-    -webkit-box-shadow: 1px 1px 3px #000;
-    box-shadow: 1px 1px 3px #000;
 }
 
 #work-in-progress-cancel-button:hover,

index.html

@@ -14,16 +14,7 @@
     <meta name="msapplication-TileColor" content="#000000">
     <meta name="msapplication-config" content="dist/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" type="text/css" href="css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="dist/engine.css" />
-    <link rel="stylesheet" type="text/css" href="css/terminal.css" />
-	<link rel="stylesheet" type="text/css" href="css/menupages.css" />
-	<link rel="stylesheet" type="text/css" href="css/workinprogress.css" />
-    <link rel="stylesheet" type="text/css" href="css/popupboxes.css" />
-    <link rel="stylesheet" type="text/css" href="css/interactivetutorial.css" />
-    <link rel="stylesheet" type="text/css" href="css/loader.css" />
-    <link rel="stylesheet" type="text/css" href="css/missions.css" />
-    <link rel="stylesheet" type="text/css" href="css/companymanagement.css" />
-    <link rel="stylesheet" type="text/css" href="css/bladeburner.css" />
 
     <!-- Google Analytics -->
     <script>

package.json

@@ -52,11 +52,14 @@
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "lodash": "^4.17.10",
+    "mini-css-extract-plugin": "^0.4.1",
     "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
     "mocha-lcov-reporter": "^1.0.0",
+    "node-sass": "^4.9.2",
     "nsp": "^3.2.1",
     "raw-loader": "~0.5.0",
+    "sass-loader": "^7.0.3",
     "script-loader": "~0.7.0",
     "should": "^11.1.1",
     "simple-git": "^1.96.0",

src/CompanyManagement.js

@@ -4736,7 +4736,7 @@ Corporation.prototype.updateDivisionContent = function(division) {
         var totalAdvertisingFac = advertisingFactors[0];
         advertisingInfo =
             "<p class='tooltip'>Advertising Multiplier: x" + formatNumber(totalAdvertisingFac, 3) +
-            "<span class='tooltiptext' style='font-size:12px'>Total multiplier for this industry's sales due to its awareness and popularity<br>" +
+            "<span class='tooltiptext cmpy-mgmt-advertising-info'>Total multiplier for this industry's sales due to its awareness and popularity<br>" +
             "Awareness Bonus: x" + formatNumber(Math.pow(awarenessFac, 0.85), 3) + "<br>" +
             "Popularity Bonus: x" + formatNumber(Math.pow(popularityFac, 0.85), 3) + "<br>" +
             "Ratio Multiplier: x" + formatNumber(Math.pow(ratioFac, 0.85), 3) + "</span></p><br>"

src/engine.js

@@ -65,6 +65,19 @@ import {StockMarket, StockSymbols,
         displayStockMarketContent}              from "./StockMarket";
 import {Terminal, postNetburnerText, post, KEY} from "./Terminal";
 
+// 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 "../css/styles.scss";
+import "../css/terminal.scss";
+import "../css/menupages.scss";
+import "../css/workinprogress.scss";
+import "../css/popupboxes.scss";
+import "../css/interactivetutorial.scss";
+import "../css/loader.scss";
+import "../css/missions.scss";
+import "../css/companymanagement.scss";
+import "../css/bladeburner.scss";
+
 /* Shortcuts to navigate through the game
  *  Alt-t - Terminal
  *  Alt-c - Character

stylelint.config.js

@@ -130,13 +130,17 @@ module.exports = {
         "no-missing-end-of-source-newline": true,
         "no-unknown-animations": true,
         "number-leading-zero": "always",
-        "number-max-precision": [3, { ignoreUnits: [ "%" ] }],
+        "number-max-precision": [4, { ignoreUnits: [ "%" ] }],
 //        "number-no-trailing-zeros": true,
         "order/order": [
             [
                 "dollar-variables",
                 "at-variables",
                 "custom-properties",
+                {
+                    type: "at-rule",
+                    name: "extend"
+                },
                 {
                     type: "at-rule",
                     name: "include"

webpack.config.js

@@ -1,5 +1,6 @@
 var path = require('path');
 var webpack = require('webpack');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = (env, argv) => ({
     plugins: [
@@ -14,6 +15,10 @@ module.exports = (env, argv) => ({
             jquery: "jquery",
             jQuery: "jquery",
             $: "jquery"
+        }),
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[id].css"
         })
     ],
     target: "web",
@@ -32,7 +37,15 @@ module.exports = (env, argv) => ({
                 test: /\.tsx?$/,
                 loader: 'ts-loader',
                 exclude: /node_modules/
-            }
+            },
+            {
+                test: /\.s?css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "sass-loader"
+                ]
+            },
         ]
     },
     optimization: {