diff --git a/css/menupages.css b/css/menupages.css index 2284324b0..f48362ad4 100644 --- a/css/menupages.css +++ b/css/menupages.css @@ -26,7 +26,7 @@ height: 100%; margin-left: 10%; width: 99%; - color: #66ff33; + color: var(--my-font-color); overflow-y: scroll; } @@ -62,7 +62,7 @@ margin-right: 0px; padding-left: 6px; width: 100%; - border: 2px solid white; + border: 2px solid var(--my-highlight-color); } #script-editor-filename-tag { @@ -71,6 +71,7 @@ padding-bottom: 0px; float:center; background-color: #555; + color: white; } #script-editor-filename { @@ -83,7 +84,7 @@ background-color: #555; padding: 2px; - border: 2px solid white; + 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); @@ -101,7 +102,7 @@ background-color: #555; } #script-editor-text { - color: #66ff33; + color: var(--my-font-color); height: 80%; width: 100%; margin-left: 6px; @@ -110,7 +111,7 @@ background-color: #555; padding-top: 6px; padding-bottom: 6px; - border: 2px solid white; + 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); @@ -198,7 +199,7 @@ background-color: #555; .active-scripts-script-header { background-color: #555; - color: #66ff33; + color: var(--my-font-color); padding: 4px; padding-left: 10px; cursor: pointer; @@ -220,7 +221,7 @@ background-color: #555; .active-scripts-script-header:after { content: '\02795'; /* "plus" sign (+) */ font-size: 13px; - color: #66ff33; + color: var(--my-font-color); float: right; margin-left: 5px; } @@ -228,7 +229,7 @@ background-color: #555; .active-scripts-script-header.active:after { content: "\2796"; /* "minus" sign (-) */ font-size: 13px; - color: #66ff33; + color: var(--my-font-color); float: right; margin-left: 5px; } @@ -291,7 +292,7 @@ background-color: #555; margin: 6px; padding: 6px; width: 85%; - border: 2px solid white; + 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); @@ -375,7 +376,7 @@ background-color: #555; height: 100%; margin-left: 10%; width: 99%; - color: #66ff33; + color: var(--my-font-color); overflow-y: auto; } @@ -425,7 +426,7 @@ background-color: #555; padding: 6px; margin: 6px; display: inline-block; - color: #66ff33; + color: var(--my-font-color); } #faction-donate-amount-txt { @@ -450,7 +451,7 @@ div.faction-clear { height: 100%; margin-left: 10%; width: 99%; - color: #66ff33; + color: var(--my-font-color); } #faction-augmentations-container p, @@ -480,7 +481,7 @@ div.faction-clear { height: 100%; margin-left: 10%; width: 99%; - color: #66ff33; + color: var(--my-font-color); overflow-y: scroll; } @@ -492,7 +493,7 @@ div.faction-clear { #augmentations-list h2, #augmentations-list p { margin: 4px; - color: #66ff33; + color: var(--my-font-color); padding: 8px; width: 70%; background-color: #333; @@ -522,7 +523,7 @@ div.faction-clear { /* Location */ #location-container { - color: #66ff33; + color: var(--my-font-color); position: fixed; padding: 6px; height: 100%; diff --git a/css/popupboxes.css b/css/popupboxes.css index 9a6ce8843..eb2fef9e9 100644 --- a/css/popupboxes.css +++ b/css/popupboxes.css @@ -8,8 +8,9 @@ width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ - background-color: black; /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + /*background-color: black; /* Fallback color */ + /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + background-color: var(--my-background-color); } .dialog-box-container { @@ -23,15 +24,15 @@ left: 50%; margin: -10% 0 0 -25%; overflow: auto; - background-color: black; - background-color: rgba(0,0,0,0.4); - border: 5px solid #FFFFFF; + background-color: var(--my-background-color); + border: 5px solid var(--my-highlight-color); } .dialog-box-content { z-index: 2; - background-color: black; + background-color: var(--my-background-color); padding: 10px; + border: 5px solid var(--my-highlight-color);; } .dialog-box-close-button { @@ -60,12 +61,12 @@ } #purchase-server-box-content { - background-color: black; + background-color: background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 12px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color);; width: 80%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #purchase-server-box-input { @@ -85,14 +86,14 @@ #purchase-server-box-confirm:hover, #purchase-server-box-confirm:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } #purchase-server-box-cancel:hover, #purchase-server-box-cancel:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } @@ -103,12 +104,12 @@ } #purchase-ram-for-home-box-content { - background-color: black; + background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 12px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color); width: 50%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #purchase-ram-for-home-box-confirm, @@ -124,14 +125,14 @@ #purchase-ram-for-home-box-confirm:hover, #purchase-ram-for-home-box-confirm:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } #purchase-ram-for-home-box-cancel:hover, #purchase-ram-for-home-box-cancel:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } @@ -142,12 +143,12 @@ } #purchase-augmentation-box-content { - background-color: black; + background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 8px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color);; width: 80%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #purchase-augmentation-box-confirm, @@ -163,14 +164,14 @@ #purchase-augmentation-box-confirm:hover, #purchase-augmentation-box-confirm:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } #purchase-augmentation-box-cancel:hover, #purchase-augmentation-box-cancel:focus { - color: #66ff33; + color: var(--my-font-color); text-decoration: none; cursor: pointer; } @@ -181,12 +182,12 @@ } #faction-invitation-box-content { - background-color: black; + background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 10px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color);; width: 80%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #faction-invitation-box-warning { @@ -225,12 +226,12 @@ } #travel-box-content { - background-color: black; + background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 10px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color);; width: 50%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #travel-box-text { @@ -268,12 +269,12 @@ } #game-options-content { - background-color: black; + background-color: var(--my-background-color); margin: 15% auto; /* 15% from the top and centered */ padding: 10px; - border: 5px solid #FFFFFF; + border: 5px solid var(--my-highlight-color); width: 50%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #game-options-close-button { @@ -296,4 +297,4 @@ color: white; text-decoration: none; cursor: pointer; -} \ No newline at end of file +} diff --git a/css/styles.css b/css/styles.css index c273084e4..c26064b68 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,25 +1,34 @@ /** This removes all padding and margins as well as setting a default font size and family for the page **/ + + +:root{ + --my-font-color: #66ff33; + --my-background-color: #000000; + --my-highlight-color: #ffffff; +} + + * { margin: 0; padding: 0; font-size: 16px; font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman'; - background-color: #252527; - background-color: black; + /*background-color: #252527;*/ + background-color: var(--my-background-color); } p { - color: #66ff33; + color: var(--my-font-color); } h1 { font-size: 22px; - color: #66ff33; + color: var(--my-font-color); } h2 { - color: #66ff33; + color: var(--my-font-color); } ul { @@ -151,8 +160,8 @@ tr:focus { .tooltip .tooltiptext { visibility: hidden; width: 300px; - background-color: black; - border: 2px solid white; + background-color: var(--my-background-color); + border: 2px solid var(--my-highlight-color);; color: white; text-align: center; padding: 4px; @@ -244,7 +253,7 @@ tr:focus { height: 175px; /* Full height */ /*margin: 50% auto;*/ padding: 5px; - border: 2px solid #66ff33; + border: 2px solid var(--my-highlight-color); width: 18%; overflow: auto; /* Enable scroll if needed */ background-color: #444; /* Fallback color */ diff --git a/css/terminal.css b/css/terminal.css index cfe21cef8..8a392f432 100644 --- a/css/terminal.css +++ b/css/terminal.css @@ -4,7 +4,7 @@ height: 100%; width: 99%; overflow: auto; - overflow-y: scroll; + overflow-y: scroll; } #terminal { @@ -15,11 +15,12 @@ font-size: 16px; overflow: auto; overflow-y: scroll; + background-color: var(--my-background-color); } #terminal-input { - background-color: black; - color: #66ff33; + background-color: var(--my-background-color); + color: var(--my-font-color); transition: height 1s; } @@ -29,10 +30,10 @@ padding: 0px !important; margin: 0px !important; border: 0px; - background-color: black; + background-color: var(--my-background-color); font-size: 16px; outline: none; - color: #66ff33; + color: var(--my-font-color); } diff --git a/css/workinprogress.css b/css/workinprogress.css index 416c8aa35..5df2903de 100644 --- a/css/workinprogress.css +++ b/css/workinprogress.css @@ -1,5 +1,5 @@ #work-in-progress-container { - color: #66ff33; + color: var(--my-font-color); position: fixed; padding-top: 10px; padding-left: 10px; @@ -8,7 +8,7 @@ } #work-in-progress-text { - color: #66ff33; + color: var(--my-font-color); width: 70%; } diff --git a/src/Terminal.js b/src/Terminal.js index e9367f6cd..9017b1883 100644 --- a/src/Terminal.js +++ b/src/Terminal.js @@ -2,18 +2,18 @@ /* Write text to terminal */ var post = function(input) { - $("#terminal-input").before('' + input.replace( / /g, " " ) + ''); + $("#terminal-input").before('' + input.replace( / /g, " " ) + ''); updateTerminalScroll(); } //Same thing as post but the td cells have ids so they can be animated for the hack progress bar var hackProgressBarPost = function(input) { - $("#terminal-input").before('' + input + ''); + $("#terminal-input").before('' + input + ''); updateTerminalScroll(); } var hackProgressPost = function(input) { - $("#terminal-input").before('' + input + ''); + $("#terminal-input").before('' + input + ''); updateTerminalScroll(); } @@ -238,7 +238,7 @@ function determineAllPossibilitiesForTabCompletion(input, index=0) { return ["alias", "analyze", "cat", "clear", "cls", "connect", "free", "hack", "help", "home", "hostname", "ifconfig", "kill", "killall", "ls", "mem", "nano", "ps", "rm", "run", "scan", "scan-analyze", - "scp", "sudov", "tail", "top"]; + "scp", "sudov", "tail", "theme", "top"]; } if (input.startsWith("scp ") && index == 1) { @@ -935,6 +935,43 @@ var Terminal = { post("Error: No such script exists"); } break; + case "theme": + //todo support theme saving + var args = commandArray[1] ? commandArray[1].split(" ") : []; + if(args.length != 1 && args.length != 3) { + post("Incorrect number of arguments. Usage: theme [default|muted|solarized] | [background color hex] [text color hex] [highlight color hex]"); + }else if(args.length == 1){ + var themeName = args[0]; + if(themeName == "default"){ + document.body.style.setProperty('--my-highlight-color',"#ffffff"); + document.body.style.setProperty('--my-font-color',"#66ff33"); + document.body.style.setProperty('--my-background-color',"#000000"); + }else if(themeName == "muted"){ + document.body.style.setProperty('--my-highlight-color',"#ffffff"); + document.body.style.setProperty('--my-font-color',"#66ff33"); + document.body.style.setProperty('--my-background-color',"#252527"); + }else if(themeName == "solarized"){ + document.body.style.setProperty('--my-highlight-color',"#6c71c4"); + document.body.style.setProperty('--my-font-color',"#839496"); + document.body.style.setProperty('--my-background-color',"#002b36"); + }else{ + post("Theme not found"); + } + }else{ + inputBackgroundHex = args[0]; + inputTextHex = args[1]; + inputHighlightHex = args[2]; + if(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputBackgroundHex) && + /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputTextHex) && + /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputHighlightHex)){ + document.body.style.setProperty('--my-highlight-color',inputHighlightHex); + document.body.style.setProperty('--my-font-color',inputTextHex); + document.body.style.setProperty('--my-background-color',inputBackgroundHex); + }else{ + post("Invalid Hex Input for theme"); + } + } + break; case "top": //TODO List each's script RAM usage post("Not yet implemented");