From 89933d4986ffd20e0bdd45d779bd11b956aba514 Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Sun, 26 Mar 2023 19:30:46 +0200
Subject: [PATCH] Moved some CSS to battle specificity issues - Fixes sidebar
 button coloring/hover

---
 client/src/global-styles/components.css | 21 ++++++++++-----------
 client/src/pages/firewall/Rules.vue     |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index ee5f939..4fc0b0e 100644
--- a/client/src/global-styles/components.css
+++ b/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);
-}
-
diff --git a/client/src/pages/firewall/Rules.vue b/client/src/pages/firewall/Rules.vue
index dae4b09..303d1a1 100644
--- a/client/src/pages/firewall/Rules.vue
+++ b/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>
\ No newline at end of file