Merge pull request #2 from danielyxie/dev

Merge upstream

.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.css → css/bladeburner.scss

@@ -1,20 +1,24 @@
-#bladeburner-container p,
-#bladeburner-container pre,
-#bladeburner-container a,
-#bladeburner-container div,
-#bladeburner-container td {
-    font-size: 13px;
+@import "theme";
+
+#bladeburner-container {
+    a,
+    div,
+    p,
+    pre,
+    td {
+        font-size: $defaultFontSize * 0.8125;
+    }
 }
 
 .bladeburner-action {
     border: 1px solid #fff;
     margin: 7px;
     padding: 7px;
     white-space: pre-wrap;
-}
 
-.bladeburner-action pre {
-    white-space: pre-wrap;
+    pre {
+        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 {
-    background-color: #3d4044;
+.bladeburner-nav-button {
+    @extend %bladburner-nav-button;
+
+    color: #fff;
+
+    &:hover {
+        background-color: #3d4044;
+    }
 }
 
 .bladeburner-nav-button-inactive {
-    border: 1px solid #fff;
-    padding: 2px;
-    margin: 2px;
+    @extend %bladburner-nav-button;
+
     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.css → 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.css → 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 {
-    background-color: #444;
+    > strong {
+        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;
-}