mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-18 05:33:54 +01:00
Merge pull request #360 from kopelli/scss
Incorporate SCSS for styling/bundling
This commit is contained in:
danielyxie
GitHub
commit
4ea6c4840c
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,3 +5,4 @@ Netburner.txt
|
||||
/dist/*.map
|
||||
/tests/*.map
|
||||
/tests/*.bundle.*
|
||||
/tests/*.css
|
||||
|
||||
61
css/_mixins.scss
Normal file
61
css/_mixins.scss
Normal file
@ -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;
|
||||
}
|
||||
15
css/_reset.scss
Normal file
15
css/_reset.scss
Normal file
@ -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;
|
||||
}
|
||||
2
css/_theme.scss
Normal file
2
css/_theme.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
|
||||
$defaultFontSize: 16px;
|
||||
@ -1,9 +1,13 @@
|
||||
#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 {
|
||||
@ -11,10 +15,10 @@
|
||||
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;
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
148
css/loader.css
148
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;
|
||||
}
|
||||
94
css/loader.scss
Normal file
94
css/loader.scss
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
@ -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 {
|
||||
display: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hack-mission-node {
|
||||
@ -27,17 +30,15 @@
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hack-mission-node p {
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
p {
|
||||
@include userSelect(none);
|
||||
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
font-size: $defaultFontSize * 0.75;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
-webkit-transform: skew(-20deg);
|
||||
-moz-transform: skew(-20deg);
|
||||
-o-transform: skew(-20deg);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
p {
|
||||
@include transform(skew(-20deg));
|
||||
@include userSelect(none);
|
||||
|
||||
color: #fff;
|
||||
font-size: $defaultFontSize * 0.75;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
-webkit-transform: skew(20deg);
|
||||
-moz-transform: skew(20deg);
|
||||
-o-transform: skew(20deg);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
p {
|
||||
@include transform(skew(20deg));
|
||||
@include userSelect(none);
|
||||
|
||||
color: #fff;
|
||||
font-size: $defaultFontSize * 0.75;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hack-mission-spam-node,
|
||||
@ -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,
|
||||
@ -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);
|
||||
-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);
|
||||
@include boxShadow(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);
|
||||
-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);
|
||||
@include boxShadow(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;
|
||||
@ -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);
|
||||
}
|
||||
@ -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,
|
||||
1857
dist/engine.css
vendored
Normal file
1857
dist/engine.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
11
index.html
11
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="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" />
|
||||
<link rel="stylesheet" type="text/css" href="dist/engine.css" />
|
||||
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
|
||||
1918
package-lock.json
generated
1918
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -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>"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user