UI Enhancements part 2

A bit more refactoring and cleaning up the code.
Updated the Augmentations accordion icons as they were barely visible.
This commit is contained in:
Mat Jaworski 2018-08-30 01:48:26 +10:00
parent 5f13bc6336
commit dbab0d73a7
2 changed files with 59 additions and 65 deletions

@ -240,16 +240,13 @@
width: auto;
display: none;
margin-bottom: 6px;
}
.active-scripts-script-panel p,
.active-scripts-script-panel h2,
.active-scripts-script-panel ul,
.active-scripts-script-panel li {
background-color: #555;
width: auto;
color: #fff;
margin-left: 5%;
p, h2, ul, li {
background-color: #555;
width: auto;
color: #fff;
margin-left: 5%;
}
}
.active-scripts-button {
@ -262,13 +259,13 @@
margin: 4px;
padding: 4px;
background-color: #000;
}
.active-scripts-button:hover,
.active-scripts-button:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
/* Hacknet Nodes */
@ -324,22 +321,22 @@
.hacknet-node-container {
display: inline-table;
}
.hacknet-node-container .row {
display: table-row;
height: 30px;
}
.row {
display: table-row;
height: 30px;
.hacknet-node-container .row p {
display: table-cell;
}
p {
display: table-cell;
}
}
.hacknet-node-container .upgradable-info {
display: inline-block;
margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */
padding: 0 4px;
width: $defaultFontSize * 4;
.upgradable-info {
display: inline-block;
margin: 0 4px; /* Don't want the vertical margin/padding, just left & right */
padding: 0 4px;
width: $defaultFontSize * 4;
}
}
.menu-page-text {

@ -113,6 +113,11 @@ tr:focus {
position: relative;
}
/* Accordion Outline */
.mainmenu-accordion-header {
outline: 2px solid #fff;
}
/* Plus and minus signs */
.mainmenu-accordion-header:after {
content: '\02795';
@ -125,12 +130,12 @@ tr:focus {
text-shadow: 0 0 0 #fff;
}
.mainmenu-accordion-header.opened:after {
content: "\2796";
}
.mainmenu-accordion-header.opened {
background-color: #222;
&:after {
content: "\2796";
}
}
/* Slide down transition */
@ -140,11 +145,6 @@ tr:focus {
transition: max-height 0.2s ease-out;
}
/* Accordion Outline */
.mainmenu-accordion-header {
outline: 2px solid #fff;
}
/* Make html links ("a" elements) nice looking buttons with this class */
a:link,
a:visited {
@ -554,32 +554,32 @@ a:visited {
text-align: left;
border: none;
outline: none;
}
position: relative;
.accordion-header.active,
.accordion-header:hover {
background-color: #555;
}
&.active,
&:hover {
background-color: #555;
}
.accordion-header.active:hover {
background-color: #666;
}
&.active:hover {
background-color: #666;
}
.accordion-header:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
float: right;
margin-left: 5px;
color: transparent;
text-shadow: 0 0 0 #fff;
}
&:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
float: right;
color: transparent;
text-shadow: 0 0 0 #fff;
position: absolute;
bottom: 3px;
right: 6px;
}
&.active:after {
content: "\2796"; /* "minus" sign (-) */
}
.accordion-header.active:after {
content: "\2796"; /* "minus" sign (-) */
font-size: $defaultFontSize * 0.8125;
color: #fff;
float: right;
margin-left: 5px;
}
.accordion-panel {
@ -591,13 +591,10 @@ a:visited {
background-color: #555;
overflow-y: auto;
overflow-x: none;
}
.accordion-panel div,
.accordion-panel ul,
.accordion-panel p,
.accordion-panel ul > li {
background-color: #555;
div, ul, p, ul > li {
background-color: #555;
}
}
/* override the global <span> styling */