Show url when mouse enters a link

This resolves #47

2 files changed, 34 insertions, 0 deletions

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 8afc86f98..0a082729c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -20,6 +20,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './auth.scss';
 @import './tooltip.scss';
 @import './info-bar.scss';
+@import './status-bar-target-url.scss';
 @import './animations.scss';
 @import './infobox.scss';
 @import './badge.scss';
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss
new file mode 100644
index 000000000..9a45314fb
--- /dev/null
+++ b/src/styles/status-bar-target-url.scss
@@ -0,0 +1,33 @@
+@import './config.scss';
+
+.status-bar-target-url {
+  // width: 100%;
+  height: auto;
+  background: $theme-gray-lighter;
+  padding: 2px 20px 2px 10px;
+  position: absolute;
+  // z-index: 100;
+  box-shadow: 0 0 8px rgba(black, 0.2);
+
+  color: $theme-gray-dark;
+
+  .status-bar-target-url__content {
+    height: auto;
+
+    .mdi {
+      margin-right: 5px;
+    }
+  }
+
+  &.status-bar-target-url--bottom {
+    order: 10;
+    bottom: 0;
+    border-top-right-radius: 5px;
+  }
+
+  &.status-bar-target-url--top {
+    order: 10;
+    top: 0;
+    border-bottom-right-radius: 5px;
+  }
+}