1 files changed, 41 insertions, 7 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3c500b36..3b7403e4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,21 +4,40 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
+  .panel {
+    background: $fallback--bg;
+    background: var(--bg, $fallback--bg)
+  }
+
+  .panel-body {
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border)
+  }
+
   .panel-heading {
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
+    background: $fallback--btn;
+    background: var(--btn, $fallback--btn);
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
     .read-button {
       position: absolute;
       right: 0.7em;
       height: 1.8em;
       line-height: 100%;
+      background-color: $fallback--btn;
+      background-color: var(--btn, $fallback--btn);
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
   }
 
   .unseen-count {
     display: inline-block;
-    background-color: rgba(255, 16, 8, 0.8);
+    background-color: $fallback--cRed;
+    background-color: var(--cRed, $fallback--cRed);
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
     min-width: 1.3em;
     border-radius: 1.3em;
@@ -27,6 +46,7 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
+    padding: 1px;
   }
 
   .notification {
@@ -39,6 +59,14 @@
     border-bottom: 1px solid;
     border-bottom-color: inherit;
 
+    .notification-gradient {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
+    }
+
+    time {
+      white-space: nowrap;
+    }
 
     .text {
       min-width: 0px;
@@ -48,19 +76,24 @@
       overflow: hidden;
 
       .icon-retweet.lit {
-        color: $green;
+        color: $fallback--cGreen;
+        color: var(--cGreen, $fallback--cGreen);
       }
 
       .icon-user-plus.lit {
-        color: $blue;
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
       }
 
       .icon-reply.lit {
-        color: $blue;
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
       }
 
       .icon-star.lit {
         color: orange;
+        color: $fallback--cOrange;
+        color: var(--cOrange, $fallback--cOrange);
       }
 
       .status-content {
@@ -91,7 +124,8 @@
       margin-top: 0.3em;
       width: 32px;
       height: 32px;
-      border-radius: 50%;
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       overflow: hidden;
       line-height: 0;
 
@@ -112,7 +146,6 @@
 
     &:last-child {
       border-bottom: none;
-      border-radius: 0 0 10px 10px;
     }
   }
 
@@ -134,7 +167,8 @@
   }
 
   .unseen {
-    border-left: 4px solid rgba(255, 16, 8, 0.75);
+    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed, $fallback--cRed);
     padding-left: 6px;
   }
 }