getting rid of baseXX, some small fixes. Seems to be usable.

1 files changed, 41 insertions, 40 deletions

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index aea841e9..2a92586b 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="nav-panel">
-    <div class="panel panel-default base01-background">
-      <ul class="base03-border">
+    <div class="panel panel-default">
+      <ul>
         <li v-if='currentUser'>
-          <router-link class="base00-background" to='/main/friends'>
+          <router-link to='/main/friends'>
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
         <li>
-          <router-link class="base00-background" to='/main/public'>
+          <router-link to='/main/public'>
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
-          <router-link class="base00-background" to='/main/all'>
+          <router-link to='/main/all'>
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
@@ -30,43 +30,44 @@
 <script src="./nav_panel.js" ></script>
 
 <style lang="scss">
- .nav-panel ul {
-     list-style: none;
-     margin: 0;
-     padding: 0;
- }
+.nav-panel ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
 
- .nav-panel li {
-     border-bottom: 1px solid;
-     border-color: inherit;
-     padding: 0;
-     &:first-child a {
-       border-top-right-radius: 10px;
-       border-top-left-radius: 10px;
-     }
-     &:last-child a {
-       border-bottom-right-radius: 10px;
-       border-bottom-left-radius: 10px;
-     }
- }
+.nav-panel li {
+    border-bottom: 1px solid;
+    border-color: var(--border);
+    background-color: var(--bg);
+    padding: 0;
+    &:first-child a {
+        border-top-right-radius: 10px;
+        border-top-left-radius: 10px;
+    }
+    &:last-child a {
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+}
 
- .nav-panel li:last-child {
-     border: none;
- }
+.nav-panel li:last-child {
+    border: none;
+}
 
- .nav-panel a {
-     display: block;
-     padding: 0.8em 0.85em;
-     &:hover {
-       background-color: transparent;
-     }
-     &.router-link-active {
-       font-weight: bolder;
-       background-color: transparent;
-       &:hover {
-         text-decoration: underline;
-       }
-     }
+.nav-panel a {
+    display: block;
+    padding: 0.8em 0.85em;
+    &:hover {
+        background-color: var(--lightBg);
+    }
+    &.router-link-active {
+        font-weight: bolder;
+        background-color: var(--lightBg);
+        &:hover {
+            text-decoration: underline;
+        }
+    }
  }
 
 </style>