Add notification system

client/source/sass/components/_notifications.scss

@@ -0,0 +1,35 @@
+$notification--background: rgba($background, 0.95);
+$notification--foreground: #8fa2b2;
+
+.notifications {
+
+  &__list {
+    background: $notification--background;
+    border-radius: 3px;
+    bottom: $spacing-unit * 1/5;
+    color: $notification--foreground;
+    font-size: 0.85rem;
+    padding: $spacing-unit * 2/5 $spacing-unit * 3/5;
+    position: fixed;
+    right: $spacing-unit * 1/5;
+    transition: opacity 0.25s;
+    width: 250px;
+    z-index: 1000;
+
+    &-leave {
+      opacity: 1;
+
+      &-active {
+        opacity: 0;
+      }
+    }
+
+    &-enter {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+      }
+    }
+  }
+}

client/source/sass/components/_torrent-details-panel.scss

@@ -12,7 +12,7 @@ $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
 
 $torrent-details--detail--label--foreground: #527893;
 
-$directory-tree--filename--foreground: rgba(#527893, 0.7);
+$directory-tree--foreground: #527893;
 $directory-tree--directory--foreground: #527893;
 $directory-tree--directory--foreground--open: darken($directory-tree--directory--foreground, 5%);
 
@@ -159,9 +159,9 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
       margin-left: -8px;
 
       .directory-tree {
-        color: $directory-tree--filename--foreground;
 
         &__node {
+          color: $directory-tree--foreground;
 
           &--group {
 

client/source/sass/components/_torrents.scss

@@ -105,6 +105,7 @@ $more-info--border: $textbox-repeater--button--border;
 
       &__more-info {
         opacity: 1;
+        pointer-events: auto;
         transform: translateX(0);
       }
     }
@@ -127,6 +128,7 @@ $more-info--border: $textbox-repeater--button--border;
     margin-top: -16px;
     position: absolute;
     opacity: 0;
+    pointer-events: none;
     right: -5px;
     top: 50%;
     transform: translateX(15px);