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('