Merge pull request #65 from pacien/oz-viewer

viewer improvements

3 files changed, 32 insertions, 8 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 1903c9e..b418911 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -32,6 +32,9 @@
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll-x {
+  overflow-x: hidden;
+}
 
 .flex {
   display: flex;
@@ -44,19 +47,35 @@
   align-items: center;
 }
 
+// === Links
+
+.link {
+  color: $link;
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+.disabled {
+  color: $disabled-color !important;
+}
+
 // === Scrollbar styling
 
 .scrollbar {
   overflow: auto;
 }
 .scrollbar::-webkit-scrollbar {
-  width: 12px;
+  width: 10px;
+  height: 10px;
 }
 .scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
 }
 .scrollbar::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 6px black;
+  box-shadow: inset 0 0 1px black;
   background-color: $toolbar-color;
 }
 
@@ -71,6 +90,9 @@
     margin: 1px;
   }
 }
+img {
+  image-orientation: from-image;
+}
 
 // === Effect to apply on lazy-image loading
 
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index efd5d79..d3aac99 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,10 @@ $panel-top-txtcolor: white;
 $panel-left-bgcolor: $panel-top-bgcolor;
 $panel-left-txtcolor: $panel-top-txtcolor;
 $content-bgcolor: #1e1e1e;
-
 $toolbar-color: #d62929;
-
-$loader-color: #119;
+$loader-color: #272727;
+$link: $panel-top-txtcolor;
+$link-hover: lightblue;
+$disabled-color: rgba($link, 0.3);
+$control-radius: 0;
+$input-radius: 0;