viewer: new breadcrumb. navigation buttons. and styling improvements

3 files changed, 20 insertions, 5 deletions

diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss
index 7fdb883..735ce6a 100644
--- a/viewer/src/assets/scss/buefy.scss
+++ b/viewer/src/assets/scss/buefy.scss
@@ -24,8 +24,7 @@
 @import "buefy_variables";
 
 // 2. Setup your Custom Colors
-// $linkedin: #0077b5;
-// $linkedin-invert: findColorInvert($linkedin);
+@import "@/assets/scss/theme.scss";
 
 @import "~bulma/sass/utilities/derived-variables";
 
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 645d4a0..3cfa1a5 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -44,6 +44,21 @@
   align-items: center;
 }
 
+// === Links
+
+.link {
+  color: $link;
+  cursor: pointer;
+  text-decoration: none;
+  & :hover {
+    color: $link-hover;
+  }
+}
+
+.disabled {
+  color: $disabled-color !important;
+}
+
 // === Scrollbar styling
 
 .scrollbar {
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 3f2b623..2314ee8 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -19,7 +19,7 @@
 
 // === Theme
 
-$layout-top: 70px;
+$layout-top: 35px;
 $layout-left: 250px;
 
 $panel-top-bgcolor: #225;
@@ -27,7 +27,8 @@ $panel-top-txtcolor: white;
 $panel-left-bgcolor: $panel-top-bgcolor;
 $panel-left-txtcolor: $panel-top-txtcolor;
 $content-bgcolor: #1e1e1e;
-
 $toolbar-color: #d62929;
-
 $loader-color: #272727;
+$link: $panel-top-txtcolor;
+$link-hover: lightblue;
+$disabled-color: rgba($link, 0.3);