mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-18 20:25:45 +01:00
Beginning to refactor stylesheets. Convert main menu to use buttons instead of a elements
This commit is contained in:
danielyxie
parent
d624d2f86f
commit
12bee24520
83
css/buttons.scss
Normal file
83
css/buttons.scss
Normal file
@ -0,0 +1,83 @@
|
||||
@import "mixins";
|
||||
@import "theme";
|
||||
|
||||
/**
|
||||
* Styling for all buttons
|
||||
*
|
||||
* Includes <button> elements as well as classes that are used
|
||||
* for formatting buttons
|
||||
*/
|
||||
|
||||
/* Remove default <button> styling */
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.a-link-button,
|
||||
.std-button {
|
||||
text-decoration: none;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #333;
|
||||
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
.a-link-button-inactive,
|
||||
.std-button:disabled {
|
||||
text-decoration: none;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #333;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.tooltiptext,
|
||||
.tooltiptexthigh,
|
||||
.tooltiptextleft {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.a-link-button-bought,
|
||||
.std-button-bought {
|
||||
text-decoration: none;
|
||||
background-color: #0a0;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #0a0;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.tooltiptext,
|
||||
.tooltiptexthigh,
|
||||
.tooltiptextleft {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
118
css/mainmenu.scss
Normal file
118
css/mainmenu.scss
Normal file
@ -0,0 +1,118 @@
|
||||
@import "mixins";
|
||||
@import "theme";
|
||||
|
||||
/**
|
||||
* Styling for the main navigation menu on the left-hand-side
|
||||
*/
|
||||
|
||||
.mainmenu {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 10%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Default buttons */
|
||||
.mainmenu > li a,
|
||||
.mainmenu > li button {
|
||||
display: block;
|
||||
color: #e6e6e6;
|
||||
background-color: #555;
|
||||
padding: 12px 8px;
|
||||
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mainmenu.classic > li a,
|
||||
.mainmenu.classic > li button {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Hovering makes them lighter */
|
||||
.mainmenu > li a:hover,
|
||||
.mainmenu > li a:hover:not(.active),
|
||||
.mainmenu > li a:focus {
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mainmenu > li button:hover,
|
||||
.mainmenu > li button:hover:not(.active) {
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Panel headers can become active, and they are "lighter" than the rest */
|
||||
.mainmenu > li a.active,
|
||||
.mainmenu > li button.active {
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mainmenu > li a.active:hover,
|
||||
.mainmenu > li button.active:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
#hacking-menu-header-li,
|
||||
#character-menu-header-li,
|
||||
#world-menu-header-li,
|
||||
#help-menu-header-li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Accordion Outline */
|
||||
.mainmenu-accordion-header {
|
||||
outline: 2px solid #fff !important;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header-classic {
|
||||
border: 2px solid #fff;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
/* Plus and minus signs */
|
||||
.mainmenu-accordion-header:after {
|
||||
content: '\02795';
|
||||
float: right;
|
||||
font-size: $defaultFontSize * 0.8125;
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
right: 3px;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #fff;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header-classic:after {
|
||||
content: '\02795';
|
||||
float: right;
|
||||
font-size: $defaultFontSize * 0.8125;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header.opened,
|
||||
.mainmenu-accordion-header-classic.opened {
|
||||
background-color: #222;
|
||||
|
||||
&:after {
|
||||
content: "\2796";
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide down transition */
|
||||
.mainmenu-accordion-panel {
|
||||
max-height: 0;
|
||||
opacity: 1;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
@ -22,16 +22,6 @@
|
||||
border: 5px solid var(--my-highlight-color);
|
||||
width: 70%;
|
||||
max-height: 80%;
|
||||
/*
|
||||
margin: auto;
|
||||
height:auto;
|
||||
max-height:80%;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
*/
|
||||
overflow-y: auto;
|
||||
color: var(--my-font-color);
|
||||
}
|
||||
|
||||
179
css/styles.scss
179
css/styles.scss
@ -40,16 +40,6 @@ 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;
|
||||
}
|
||||
@ -63,181 +53,12 @@ tr:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Main navigation menu */
|
||||
.mainmenu {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 10%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Default buttons */
|
||||
.mainmenu > li a {
|
||||
display: block;
|
||||
color: #e6e6e6;
|
||||
background-color: #555;
|
||||
padding: 12px 8px;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mainmenu.classic > li a {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Hovering makes them lighter */
|
||||
.mainmenu > li a:hover,
|
||||
.mainmenu > li a:hover:not(.active),
|
||||
.mainmenu > li a:focus {
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Panel headers can become active, and they are "lighter" than the rest */
|
||||
.mainmenu > li a.active {
|
||||
background-color: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mainmenu > li a.active:hover {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
#hacking-menu-header-li,
|
||||
#character-menu-header-li,
|
||||
#world-menu-header-li,
|
||||
#help-menu-header-li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Accordion Outline */
|
||||
.mainmenu-accordion-header {
|
||||
outline: 2px solid #fff;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header-classic {
|
||||
border: 2px solid #fff;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
/* Plus and minus signs */
|
||||
.mainmenu-accordion-header:after {
|
||||
content: '\02795';
|
||||
float: right;
|
||||
font-size: $defaultFontSize * 0.8125;
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
right: 3px;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #fff;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header-classic:after {
|
||||
content: '\02795';
|
||||
float: right;
|
||||
font-size: $defaultFontSize * 0.8125;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mainmenu-accordion-header.opened,
|
||||
.mainmenu-accordion-header-classic.opened {
|
||||
background-color: #222;
|
||||
|
||||
&:after {
|
||||
content: "\2796";
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide down transition */
|
||||
.mainmenu-accordion-panel {
|
||||
max-height: 0;
|
||||
opacity: 1;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Make html links ("a" elements) nice looking buttons with this class */
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.a-link-button {
|
||||
text-decoration: none;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #333;
|
||||
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
/* Make anchor tags ("a" elements) inactive (not clickable) */
|
||||
.a-link-button-inactive {
|
||||
text-decoration: none;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #333;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.tooltiptext,
|
||||
.tooltiptexthigh,
|
||||
.tooltiptextleft {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make anchor tags ("a" elements) for activated actions */
|
||||
.a-link-button-bought {
|
||||
text-decoration: none;
|
||||
background-color: #0a0;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #0a0;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
.tooltiptext,
|
||||
.tooltiptexthigh,
|
||||
.tooltiptextleft {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@ -7392,6 +7392,11 @@
|
||||
"sort-keys": "1.1.2"
|
||||
}
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz",
|
||||
"integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A=="
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
"loader-runner": "^2.3.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"memory-fs": "~0.4.1",
|
||||
"normalize.css": "^8.0.0",
|
||||
"numeral": "2.0.6",
|
||||
"sprintf-js": "^1.1.1",
|
||||
"tapable": "^1.0.0",
|
||||
|
||||
@ -3533,7 +3533,7 @@ Corporation.prototype.updateUIHeaderTabs = function() {
|
||||
content.appendChild(yesBtn);
|
||||
container.appendChild(content);
|
||||
document.getElementById("entire-game-container").appendChild(container);
|
||||
container.style.display = "block";
|
||||
container.style.display = "flex";
|
||||
return false;
|
||||
}
|
||||
}));
|
||||
|
||||
@ -76,7 +76,10 @@ import {Page, routing} from "./ui/navigationTra
|
||||
|
||||
// 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 'normalize.css';
|
||||
import "../css/styles.scss";
|
||||
import "../css/buttons.scss";
|
||||
import "../css/mainmenu.scss";
|
||||
import "../css/terminal.scss";
|
||||
import "../css/menupages.scss";
|
||||
import "../css/workinprogress.scss";
|
||||
|
||||
@ -35,73 +35,73 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
|
||||
<ul id="mainmenu" class="mainmenu">
|
||||
<!-- Hacking dropdown -->
|
||||
<li id="hacking-menu-header-li">
|
||||
<a id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </a>
|
||||
<button id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </button>
|
||||
</li>
|
||||
<li id="terminal-tab" class="mainmenu-accordion-panel">
|
||||
<a id="terminal-menu-link"> Terminal </a>
|
||||
<button id="terminal-menu-link"> Terminal </button>
|
||||
</li>
|
||||
<li id="create-script-tab" class="mainmenu-accordion-panel">
|
||||
<a id="create-script-menu-link"> Create Script </a>
|
||||
<button id="create-script-menu-link"> Create Script </button>
|
||||
</li>
|
||||
<li id="active-scripts-tab" class="mainmenu-accordion-panel">
|
||||
<a id="active-scripts-menu-link"> Active Scripts </a>
|
||||
<button id="active-scripts-menu-link"> Active Scripts </button>
|
||||
</li>
|
||||
<li id="create-program-tab" class="mainmenu-accordion-panel">
|
||||
<a id="create-program-menu-link"> Create Program </a>
|
||||
<button id="create-program-menu-link"> Create Program </button>
|
||||
<span id="create-program-notification" class="notification-off"> </span>
|
||||
</li>
|
||||
|
||||
<!-- Character dropdown -->
|
||||
<li id="character-menu-header-li">
|
||||
<a id="character-menu-header" class="mainmenu-accordion-header"> Character </a>
|
||||
<button id="character-menu-header" class="mainmenu-accordion-header"> Character </button>
|
||||
</li>
|
||||
<li id="stats-tab" class="mainmenu-accordion-panel">
|
||||
<a id="stats-menu-link"> Stats </a>
|
||||
<button id="stats-menu-link"> Stats </button>
|
||||
</li>
|
||||
<li id="factions-tab" class="mainmenu-accordion-panel">
|
||||
<a id="factions-menu-link"> Factions </a>
|
||||
<button id="factions-menu-link"> Factions </button>
|
||||
</li>
|
||||
<li id="augmentations-tab" class="mainmenu-accordion-panel">
|
||||
<a id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </a>
|
||||
<button id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </button>
|
||||
</li>
|
||||
<li id="hacknet-nodes-tab" class="mainmenu-accordion-panel">
|
||||
<a id="hacknet-nodes-menu-link"> Hacknet Nodes </a>
|
||||
<button id="hacknet-nodes-menu-link"> Hacknet Nodes </button>
|
||||
</li>
|
||||
|
||||
<!-- World dropdown -->
|
||||
<li id="world-menu-header-li">
|
||||
<a id="world-menu-header" class="mainmenu-accordion-header">World</a>
|
||||
<button id="world-menu-header" class="mainmenu-accordion-header">World</button>
|
||||
</li>
|
||||
<li id="city-tab" class="mainmenu-accordion-panel">
|
||||
<a id="city-menu-link"> City </a>
|
||||
<button id="city-menu-link"> City </button>
|
||||
</li>
|
||||
<li id="travel-tab" class="mainmenu-accordion-panel">
|
||||
<a id="travel-menu-link">Travel</a>
|
||||
<button id="travel-menu-link"> Travel </button>
|
||||
</li>
|
||||
<li id="job-tab" class="mainmenu-accordion-panel">
|
||||
<a id="job-menu-link">Job</a>
|
||||
<button id="job-menu-link"> Job </button>
|
||||
</li>
|
||||
<li id="bladeburner-tab" class="mainmenu-accordion-panel">
|
||||
<a id="bladeburner-menu-link"> Bladeburner </a>
|
||||
<button id="bladeburner-menu-link"> Bladeburner </button>
|
||||
</li>
|
||||
<li id="corporation-tab" class="mainmenu-accordion-panel">
|
||||
<a id="corporation-menu-link"> Corp </a>
|
||||
<button id="corporation-menu-link"> Corp </button>
|
||||
</li>
|
||||
<li id="gang-tab" class="mainmenu-accordion-panel">
|
||||
<a id="gang-menu-link"> Gang </a>
|
||||
<button id="gang-menu-link"> Gang </button>
|
||||
</li>
|
||||
|
||||
<li id="help-menu-header-li">
|
||||
<a id="help-menu-header" class="mainmenu-accordion-header">Help</a>
|
||||
<button id="help-menu-header" class="mainmenu-accordion-header"> Help </button>
|
||||
</li>
|
||||
<li id="tutorial-tab" class="mainmenu-accordion-panel">
|
||||
<a id="tutorial-menu-link"> Tutorial </a>
|
||||
<button id="tutorial-menu-link"> Tutorial </button>
|
||||
</li>
|
||||
<li id="options-tab" class="mainmenu-accordion-panel">
|
||||
<a id="options-menu-link"> Options </a>
|
||||
<button id="options-menu-link"> Options </button>
|
||||
</li>
|
||||
<li id="dev-tab" class="mainmenu-accordion-panel">
|
||||
<a id="dev-menu-link"> Dev </a>
|
||||
<button id="dev-menu-link"> Dev </button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user