1 files changed, 67 insertions, 0 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 7afca8c..9444548 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -18,6 +18,7 @@
 */
 
 // Global CSS
+@import "~@/assets/scss/theme.scss";
 
 // === Forms
 
@@ -26,11 +27,18 @@
   color: red;
 }
 
+button svg + span {
+  margin-left: 7px;
+}
+
 // === Tools
 
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll-x {
+  overflow-x: hidden;
+}
 
 .flex {
   display: flex;
@@ -42,3 +50,62 @@
 .flex-center {
   align-items: center;
 }
+
+// === Links
+
+.link {
+  color: $link;
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+.disabled {
+  color: $disabled-color !important;
+  cursor: initial;
+}
+
+// Disable sticky hover styling on touch devices,
+// on which the virtual cursor doesn't leave the element after being tapped.
+// The fix can be applied to `a` elements by using the .link class.
+@media (hover: none), (hover: on-demand) {
+  .link:hover {
+    color: $link !important;
+  }
+  .disabled:hover {
+    color: $disabled-color !important;
+  }
+}
+
+// === Scrollbar styling
+
+.scrollbar {
+  overflow: auto;
+}
+.scrollbar::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+.scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 1px black;
+  background-color: $scrollbar-color;
+}
+
+// === Effect to apply on lazy-image loading
+
+img {
+  display: block;
+  image-orientation: from-image;
+  &.v-lazy-image {
+    opacity: 0;
+    transition: opacity 0.4s;
+  }
+  &.v-lazy-image-loaded {
+    opacity: 1;
+  }
+}