Moved some CSS to battle specificity issues

- Fixes sidebar button coloring/hover

client/src/global-styles/components.css

@@ -60,7 +60,12 @@ th svg {
 button, .button {
   background-color: var(--cl-bg-el);
 }
-.button:hover, button:hover, svg:hover {
+/* Button Background Exception for Nav Menu */
+.nav-body button,
+.nav-body .button {
+  background-color: var(--cl-bg);
+}
+.button:hover, button:hover {
   background-color: var(--cl-bg-hl);
 }
 
@@ -69,6 +74,10 @@ input {
   border: 1px solid var(--cl-fg);
 }
 
+table {
+  background-color: var(--cl-bg);
+}
+
 th {
   background-color: var(--cl-bg-el);
 }
@@ -76,13 +85,3 @@ th {
 tbody tr:hover, th:hover {
   background-color: var(--cl-bg-hl);
 }
-
-/* Button Background Exception for Nav Menu */
-.nav-body > button, .button {
-  background-color: var(--cl-bg);
-}
-
-.nav-body > * > button, .nav-body > * > button > svg {
-  background-color: var(--cl-bg);
-}
-

client/src/pages/firewall/Rules.vue

@@ -33,6 +33,6 @@ onMounted(async() => {
     <PageHeader title="Forward Rules">
       <button @click="loadRules">Load Rules</button>
     </PageHeader>
-    <NiceTable class="cl-p-3" :columns="columns" v-model:data="rules"/>
+    <NiceTable class="cl-secondary" :columns="columns" v-model:data="rules"/>
   </div>
 </template>