diff --git a/css/menupages.css b/css/menupages.css index 11e198ef8..f6d8f943a 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 708102496..0d0c019ba 100644 --- a/css/popupboxes.css +++ b/css/popupboxes.css @@ -8,11 +8,13 @@ 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: rbga(var(--my-background-color), 0.4); } -.dialog-box-container { +.dialog-box-container, +#log-box-container { display: block; position: absolute; z-index: 2; @@ -23,18 +25,19 @@ 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 { +.dialog-box-content, +#log-box-content { z-index: 2; - background-color: black; + background-color: var(--my-background-color); padding: 10px; } -.dialog-box-close-button { +.dialog-box-close-button, +#log-box-close { color: #aaa; float: right; font-size: 20px; @@ -48,7 +51,9 @@ } .dialog-box-close-button:hover, -.dialog-box-close-button:focus { +.dialog-box-close-button:focus, +#log-box-close:hover, +#log-box-close:focus { color: white; text-decoration: none; cursor: pointer; @@ -60,12 +65,12 @@ } #purchase-server-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: 80%; /* Could be more or less, depending on screen size */ - color: #66ff33; + color: var(--my-font-color); } #purchase-server-box-input { @@ -85,14 +90,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 +108,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 +129,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 +147,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 +168,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 +186,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 +230,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 +273,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 { @@ -300,4 +305,5 @@ #import-game-file-selector { display:none; -} \ No newline at end of file +} + diff --git a/css/styles.css b/css/styles.css index c273084e4..d958405aa 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; @@ -228,6 +237,7 @@ tr:focus { right: 0; bottom: 0; padding: 4px; + margin-right: 14px; background-color: transparent; z-index: 2; } @@ -241,10 +251,10 @@ tr:focus { position: absolute; /* Stay in place */ right: 0; top: 0; - height: 175px; /* Full height */ + height: 185px; /* 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 */ @@ -253,12 +263,13 @@ tr:focus { #character-overview-text { padding: 4px; - margin: 12px; + margin: 10px; color: white; background-color: #444; } -#character-overview-save-button { +#character-overview-save-button, +#character-overview-options-button { color: #aaa; font-size: 16px; font-weight: bold; @@ -271,8 +282,14 @@ tr:focus { } #character-overview-save-button:hover, -#character-overview-save-button:focus { +#character-overview-save-button:focus, +#character-overview-options-button:hover, +#character-overview-options-button:focus { color: white; text-decoration: none; cursor: pointer; } + +#character-overview-options-button { + display: inline-block; +} 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/index.html b/index.html index 7f66c8930..0af867fcf 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -645,6 +646,14 @@ Heist + +
+
+