From dbab0d73a76c9cf536319206d4a60f0a078a2d67 Mon Sep 17 00:00:00 2001
From: Mat Jaworski <mateusz.m.jaworski@gmail.com>
Date: Thu, 30 Aug 2018 01:48:26 +1000
Subject: [PATCH] UI Enhancements part 2

A bit more refactoring and cleaning up the code.
Updated the Augmentations accordion icons as they were barely visible.
---
 css/menupages.scss | 53 ++++++++++++++++------------------
 css/styles.scss    | 71 ++++++++++++++++++++++------------------------
 2 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/css/menupages.scss b/css/menupages.scss
index 64cd82939..cd35bec4a 100644
--- a/css/menupages.scss
+++ b/css/menupages.scss
@@ -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 {
diff --git a/css/styles.scss b/css/styles.scss
index 0f2fead93..6daebde94 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -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 */